Esikatselu
<Chip label="Lorem ipsum" onDelete={() => console.log("delete")} />
Käyttötarkoitus
Chip tarjoaa tavan esittää tieto tai toiminto kompaktissa elementissä. Komponenttia voidaan hyödyntää mm. lomakkeessa tehtyjen valintojen tai sisältöön liittyvien aihetunniste-linkitysten näyttämiseen.
Komponentissa on huomioitu toistaiseksi vain tarve Multiselect-komponentin valintojen näyttämiseen.
Saavutettavuus
Kun kohdistus on Chip-elementissä tai poista-painikkeessa, kutsutaan onDelete-funktiota Backspace- tai Delete-näppäimen painalluksella.
Chipin poistamisen yhteydessä ruudunlukijalle ilmoitettavan viestin voi asettaa deleteButtonAriaLabel-propilla
<Chip deleteButtonAriaLabel="Remove primary variant" label="Primary Variant" onDelete={() => console.log("delete")} />
Esimerkit
Ulkoasuvaihtoehdot
<>
<Chip
deleteButtonAriaLabel="Remove primary variant"
label="Primary Variant"
onDelete={() => console.log("delete")}
className="kds-mb-2 kds-mr-2"
/>
<Chip
deleteButtonAriaLabel="Remove outline variant"
label="Outline Variant"
onDelete={() => console.log("delete")}
className="kds-mb-2 kds-mr-2"
variant="outline"
/>
</>
Sisällön räätälöinti
Sisältöä voi kevyesti räätälöidä antamalla label-propin sijasta tekstisisällön lapsielementteinä.
<Chip onDelete={() => console.log("delete")}>
<span aria-hidden>Teksti</span>
<span className="kds-sr-only">Teksti ruudunlukijalle</span>
</Chip>
Chip-elementtien esittäminen listana
Useamman Chipin esittämiseen kerralla kannataa hyödyntää List-komponenttia. Tällöin ruudunlukija hahmottaa Chip-komponenttien tarkoituksen paremmin.
<List unstyled aria-label="Ryhmää kuvaava nimilappu" className="kds-flex kds-flex-wrap">
<ListItem>
<Chip onDelete={() => console.log("delete")} deleteButtonAriaLabel="Poista valinta" className="kds-mr-2">
<span aria-hidden>Teksti</span>
<span className="kds-sr-only">Teksti ruudunlukijalle</span>
</Chip>
</ListItem>
<ListItem>
<Chip onDelete={() => console.log("delete")} className="kds-mx-2" deleteButtonAriaLabel="Poista valinta" className="kds-mr-2">
<span aria-hidden>Teksti</span>
<span className="kds-sr-only">Teksti ruudunlukijalle</span>
</Chip>
</ListItem>
<ListItem>
<Chip onDelete={() => console.log("delete")} deleteButtonAriaLabel="Poista valinta">
<span aria-hidden>Teksti</span>
<span className="kds-sr-only">Teksti ruudunlukijalle</span>
</Chip>
</ListItem>
</ListItem>