Tag components
FREEFree and open-source React tag components built for modern applications and websites. These tags are built using React Aria and styled with Tailwind CSS.
Installation
You can add this tags component using our CLI or manually:
npx untitledui add tags
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.
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.
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.
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.
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.
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.
FAQs
Please refer to our frequently asked questions page for more.
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.
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.
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.
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.
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.
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.