export const title = "Tag components"
export const description = "Free and open-source React tag components built for modern applications and websites. These tags are built using React Aria and styled with Tailwind CSS."
export const links = {
    github: "https://github.com/untitleduico/react/tree/main/components/base/tags",
    rac: "https://react-spectrum.adobe.com/react-aria/TagGroup.html"
}

import * as Demos from "@/components/base/tags/tags.demo.tsx";

<PreviewAndCode title="Tags example">
    <ResizablePreview id="preview" className="flex py-32 min-h-[320px] items-center justify-center gap-3 rounded-[20px] ring-1 ring-inset ring-secondary bg-primary">
        <Demos.DefaultDemo />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="tags/DefaultDemo" />
    </TabPanel>
</PreviewAndCode>

<Divider />

## Installation

You can add this tags component using our CLI or manually:

<Tabs className="w-full mt-8">
    <TabList type="underline" items={[{ id:'cli', label:'CLI' }, { id:'manual', label:'Manual' }]} />

    <TabPanel id="cli" className="mt-8">
        ```bash
        npx untitledui@latest add tags
        ```
    </TabPanel>

    <TabPanel id="manual">
        <Steps>
            <Step title="Copy component files">
                Copy the files below into your project:

                <ComponentCodeTabs component="base/tags" />
            </Step>
            <Step title="Start using the components">
                Great! Now you can start using the tags components in your project by just copy/pasting our examples below.
            </Step>
        </Steps>
    </TabPanel>
</Tabs>

<Divider />

## Tags examples

Below are examples and variations of this tags component:

### Sizes

Our tags component comes with three predefined sizes: `sm`, `md`, and `lg`. You can set the size using the `size` prop on the `TagGroup` component, which will apply to all tags within that group.

<PreviewAndCode title="Sizes example">
    <ResizablePreview id="preview" className="flex py-32 min-h-[320px] items-center justify-center rounded-[20px] ring-1 ring-inset ring-secondary bg-primary">
        <Demos.SizesDemo />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="tags/SizesDemo" />
    </TabPanel>
</PreviewAndCode>

### Close X

Tags can be dismissible by using the `onRemove` prop on the `TagGroup` component or the `onClose` prop on individual `Tag` components. This will add a remove button to the tag that, when clicked, will trigger the callback function with the key of the tag that was removed.

<PreviewAndCode title="Close X example">
    <ResizablePreview id="preview" className="flex py-32 min-h-[320px] items-center justify-center rounded-[20px] ring-1 ring-inset ring-secondary bg-primary">
        <Demos.CloseXDemo />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="tags/CloseXDemo" />
    </TabPanel>
</PreviewAndCode>

### Count

Tags can display a count next to the tag by passing a number to the `count` prop on the `Tag` component. This is useful when you want to display the number of items associated with the tag.

<PreviewAndCode title="Count example">
    <ResizablePreview id="preview" className="flex py-32 min-h-[320px] items-center justify-center rounded-[20px] ring-1 ring-inset ring-secondary bg-primary">
        <Demos.CountDemo />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="tags/CountDemo" />
    </TabPanel>
</PreviewAndCode>

### Checkbox

You can make the tags selectable by passing either `"single"` or `"multiple"` to the `selectionMode` prop on the `TagGroup` component. This will allow users to select one or multiple tags at once.

<PreviewAndCode title="Checkbox example">
    <ResizablePreview id="preview" className="flex py-32 min-h-[320px] items-center justify-center rounded-[20px] ring-1 ring-inset ring-secondary bg-primary">
        <Demos.CheckboxDemo />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="tags/CheckboxDemo" />
    </TabPanel>
</PreviewAndCode>

### Checkbox close X

If you'd like to make selectable tags dismissible, you can pass the `onRemove` prop to the `TagGroup` component. This will add a remove button to the tags that, when clicked, will trigger the callback function with the key of the tag that was removed.

<PreviewAndCode title="Checkbox close X example">
    <ResizablePreview id="preview" className="flex py-32 min-h-[320px] items-center justify-center rounded-[20px] ring-1 ring-inset ring-secondary bg-primary">
        <Demos.CheckboxCloseXDemo />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="tags/CheckboxCloseXDemo" />
    </TabPanel>
</PreviewAndCode>

### Checkbox count

Selectable tags can also display a count next to the tag, just like non-selectable tags, by passing a number to the `count` prop on the `Tag` component. This is useful when you want to display the number of items associated with the tag.

<PreviewAndCode title="Checkbox count example">
    <ResizablePreview id="preview" className="flex py-32 min-h-[320px] items-center justify-center rounded-[20px] ring-1 ring-inset ring-secondary bg-primary">
        <Demos.CheckboxCountDemo />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="tags/CheckboxCountDemo" />
    </TabPanel>
</PreviewAndCode>

<Divider />

<FAQ
    faqs={[
        {
            question: "How do I make tags dismissible?",
            answer: "You can make tags dismissible by using the `onRemove` prop on the `TagGroup` component or the `onClose` prop on individual `Tag` components. This will add a remove button to the tag that, when clicked, will trigger the callback function.",
        },
        {
            question: "How do I handle tag selection?",
            answer: "You can implement tag selection by setting the `selectionMode` prop on `TagGroup` to `\"single\"` or `\"multiple\"`, and using the `selectedKeys` and `onSelectionChange` props to track and respond to selection changes.",
        },
        {
            question: "What sizes are available for tags?",
            answer: "Tags support three sizes: `\"sm\"`, `\"md\"`, and `\"lg\"`. You can set the size using the `size` prop on the `TagGroup` component, which applies to all tags within that group.",
        },
        {
            question: "Can I add avatars, icons, or dots to tags?",
            answer: "Yes, you can enhance tags with visual elements: use the `avatarSrc` prop to add avatar images, the `dot` prop to show a status dot, or pass custom content as children. You can also display counts using the `count` prop.",
        },
        {
            question: "Are the tags accessible?",
            answer: "Yes, the tags component is built with accessibility in mind using React Aria. It supports keyboard navigation, proper ARIA attributes, focus management, and screen reader compatibility to ensure a good experience for all users.",
        },
        {
            question: "Can I disable individual tags?",
            answer: "Yes, you can disable individual tags by setting the `isDisabled` prop to `true` on the `Tag` component. Disabled tags will have a different visual appearance and won't respond to user interactions.",
        },
    ]}
/>