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 et mobile — le même composant pour React et React Native. Bêta : son API peut encore changer à une version mineure.
Quand l’utiliser
- A profile's interests, up to five.
- Filters by topic with a limit.
Quand ne pas l’utiliser
- To type free tags.À la place : Tag input
- For one choice.À la place : Radio group
Installation
Installer
npm install @krizaka/ui @krizaka/tailwind @krizaka/tokens tailwindcssStyles
@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";Importer
import { TagSelector } from "@krizaka/ui/tag-selector";Exemples
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 | Défaut | Description |
|---|---|---|---|
labelrequis | string | — | The group's name (“Interests”) — passed translated. |
onValueChangerequis | (value: string[]) => void | — | Called with the tags chosen. |
optionsrequis | readonly TagOption[] | — | The tags offered. |
valuerequis | 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. |
Accessibilité
- A group named by
label; each chip says whether it is chosen; the count is announced.
Clavier
| Touches | Action |
|---|---|
| Tab / Space | Reach and toggle each chip. |
Bonnes pratiques
- Say the limit in the count (“3 of 5 chosen”).
- Order the options by popularity, not alphabet.
Composants liés
Générée depuis le code de @krizaka/ui 3.5.0 : son meta.ts, ses exemples et ses types.Modifier cette documentation sur 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.