MultiSelect

Kilka wyborów ze znanej listy, takich jak etykiety albo kanały. Dla swobodnego tekstu, który zamienia się w tagi, użyj ChipInput.

PodglądLink do sekcji Podgląd

Na żywo we wszystkich trzech motywach. Wszystko tutaj jest interaktywne.

Labels

NotifyChoose at least one label.

Labels

NotifyChoose at least one label.

Labels

NotifyChoose at least one label.

tsx

import { MultiSelect } from '@skribly/ui/forms'

tsx

<MultiSelect label="Labels" items={labels}
  formatSelection={(names) => names.length > 2 ? `${names.length} labels` : names.join(', ')} />

Każda etykieta jest propem, więc aplikacja przekazuje własne słowa we własnym języku. Zobacz zasadę brak wbudowanego tekstu.

Lista zostaje otwarta podczas wybierania; Spacja lub Enter przełącza opcję, a Escape zamyka listę.
Każdy wiersz pokazuje znak pola wyboru, a także stan zaznaczenia, który ogłasza React Aria.
Tekst elementu otwierającego jest ucinany wielokropkiem, więc dla długich wyborów daj formatSelection liczbę.

Ten przykład przechodzi przez axe we wszystkich trzech motywach przy każdym uruchomieniu testów. Zobacz, co sprawdzają testy.