Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

FAQ blocks

Pro

Tags FAQ Block for Vue

A tagged FAQ for a children's book club: a side header with a tag cloud, and questions that carry their own tag buttons, both filtering the same list.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

A tagged FAQ for Vue with Ark UI. A side header at the start holds the title, one sentence and a cloud of five tags with their counts; seven questions fill the end behind a split divider, each with two tag buttons under it. Choosing a tag, in the cloud or on a question, filters the list to the questions that carry it and presses that tag everywhere; choosing it again lifts the filter. A bar above the rows says what is showing ("#shipping, 4 questions") and keeps its height whether or not a tag is on. On a phone the header and the cloud stack above the rows. It's built from Toggle, Accordion, Button and Guides, with your theme's tokens for every colour. For FAQs whose questions cut across topics, where one question can sit under two tags.

FAQ

How do I change the tags and questions?

Edit TAGS (the tag names) and QUESTIONS at the top of the file: each question has an id, the question, its answer and its tags, a list of names from TAGS. The count beside each tag in the cloud is worked out from the questions. Two tags per question reads well; more crowds the rows.

Can two tags be on at once?

No: one tag is the filter at a time, and choosing another replaces it. For a union of several, see the Multi Select FAQ; for an intersection, make tag a list and filter with every.

How do the tag buttons work with a keyboard?

Every tag, in the cloud and under a question, is a toggle button that says whether it's pressed; Tab reaches it and Space or Enter turns it on or off. The tags sit under the question's heading, outside its button, so they don't nest controls. The status line is a polite live region and focus stays where it was. In the list the Up and Down arrows also move between questions.

Are filtered-out questions still in the page's markup?

No: a question that doesn't carry the chosen tag is removed from the page, not hidden. Closed answers of the questions that are shown: The Accordion takes lazyMount={false} and unmountOnExit={false}, so every answer renders from the start, hidden until its question opens.

How does it fit on a phone?

The title, the sentence and the tag cloud stack above the rows, the cloud wrapping onto two lines, and the split divider becomes a rule across the block. The tags under each question wrap, and nothing scrolls sideways at 320 pixels.

Why does the plus turn into a cross?

Each question ends in a plus that turns 45 degrees into a cross while its answer is open; under reduced motion it changes without turning. It's a decoration, and the button's expanded state is what a screen reader hears.

All 100 faq blocks