Basic
A tag group is a focusable collection of labels, categories, keywords, filters, or other elements, equipped with keyboard navigation, selection, and removal functionalities.
Preview
Code
Android Brands
Samsung
OnePlus
Google
Xiaomi
Installation
CLI
Manual
npx hq-kit add tag-group
With Remove Button
Tags within the group can include a removal button.
Preview
Code
Cars
Ferrari
Lamborghini
Porsche
Bugatti
McLaren
Aston Martin
Bentley
Rolls-Royce
Maserati
Jaguar
Variants
The default variant is primary. You can also use secondary, success, warning, and danger.
Preview
Code
primary
Nike
Adidas
Puma
Reebok
secondary
Nike
Adidas
Puma
Reebok
success
Nike
Adidas
Puma
Reebok
warning
Nike
Adidas
Puma
Reebok
danger
Nike
Adidas
Puma
Reebok
dark
Nike
Adidas
Puma
Reebok
Controlled
Manage the values of the tag group through the value prop.
Preview
Code
Fruits
You have selected: Apple
Banana
Cherry
Date
Href
Incorporate a hyperlink within the tag group using the href prop.
Preview
Code
Articles
React Tutorial
TypeScript Handbook
JavaScript Guide
Shape
The tag group can be shaped to be a square or a circle. Just like the badge component, see badge documentation for more information.
Preview
Code
rounded
Tesla Model S
Ford Mustang
Chevrolet Camaro
BMW M3
Audi R8
sharp
Tesla Model S
Ford Mustang
Chevrolet Camaro
BMW M3
Audi R8
circle
Tesla Model S
Ford Mustang
Chevrolet Camaro
BMW M3
Audi R8
Disabled
Disable tags either by setting the isDisabled prop or using disabledKeys on the TagGroup.
Preview
Code
Disabled Key
Samsung
OnePlus
Google
Xiaomi
Disabled by Tag
Samsung
OnePlus
Google
Xiaomi