Tag selector
Interests, languages, what one is looking for: toggle chips with a limit and a count — the others rest once the limit is reached.
Web and mobile — the same component for React and React Native. Beta: its API may still change in a minor version.
When to use
- A profile's interests, up to five.
- Filters by topic with a limit.
When not to use
- To type free tags.Use instead: Tag input
- For one choice.Use instead: Radio group
Installation
Install
npm install @krizaka/ui @krizaka/tailwind @krizaka/tokens tailwindcssStyles
@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";Import
import { TagSelector } from "@krizaka/ui/tag-selector";Examples
Interests
Ten interests, up to five.
3 of 5 chosen
Props
Toggle chips with a limit and a count — the others rest once the limit is reached.
| Prop | Type | Default | Description |
|---|---|---|---|
labelrequired | string | — | The group's name (“Interests”) — passed translated. |
onValueChangerequired | (value: string[]) => void | — | Called with the tags chosen. |
optionsrequired | readonly TagOption[] | — | The tags offered. |
valuerequired | readonly string[] | — | The tags chosen. |
className | string | — | Classes merged on the root. |
countLabel | ((count: number, max: number) => string) | — | The count under the tags: (n, max) => n + " of " + max. |
max | number | — | The most that can be chosen. |
Accessibility
- A group named by
label; each chip says whether it is chosen; the count is announced.
Keyboard
| Keys | Action |
|---|---|
| Tab / Space | Reach and toggle each chip. |
Best practices
- Say the limit in the count (“3 of 5 chosen”).
- Order the options by popularity, not alphabet.
Related components
Generated from the code of @krizaka/ui 3.5.0: its meta.ts, its examples and its types.Edit this documentation on GitHub
Tag input
Free words as removable chips — Enter or a comma adds one, a paste adds several, suggestions complete, normalize cleans and validate refuses with a reason.
Chip link
A chip that is a link — a filter that is an address — with the look of Chip, the current one marked, and chipVariants to style anything else; server-safe.