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:
FAQs
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.