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 + MobileBêtaFormulaires

Web et mobile — le même composant pour React et React Native. Bêta : son API peut encore changer à une version mineure.

Pourquoi il est là. Used by krizaka.com.

Quand l’utiliser

Installer

npm install @krizaka/ui @krizaka/tailwind @krizaka/tokens tailwindcss

Styles

@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";

Importer

import { TagSelector } from "@krizaka/ui/tag-selector";

Ten interests, up to five.

3 of 5 chosen

Toggle chips with a limit and a count — the others rest once the limit is reached.

Prop	Type	Défaut	Description
`label`requis	`string`	—	The group's name (“Interests”) — passed translated.
`onValueChange`requis	`(value: string[]) => void`	—	Called with the tags chosen.
`options`requis	`readonly TagOption[]`	—	The tags offered.
`value`requis	`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.

A group named by label; each chip says whether it is chosen; the count is announced.

Touches	Action
`Tab / Space`	Reach and toggle each chip.

Générée depuis le code de @krizaka/ui 3.9.0 : son meta.ts, ses exemples et ses types.Modifier cette documentation sur GitHub