Esikatselu
<Chip label="Lorem ipsum" deleteButtonAriaLabel="Poista valinta" 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.
Saavutettavuus
Kun kohdistus on Chip-elementissä tai poista-painikkeessa, kutsutaan onDelete-funktiota Backspace- tai Delete-näppäimen painalluksella.
Poista-painikkeen tekstin voi asettaa deleteButtonAriaLabel-propilla.
Kun Chip-komponenttia käytetään valinnan tilan näyttämiseen komponentti lisää automaattisesti aria-pressed-attribuutin.
Useampi Chip kannattaa esittää listana.
<Chip label="Lorem ipsum" deleteButtonAriaLabel="Remove lorem ipsum" onDelete={() => console.log("delete")} />
Esimerkit
Ulkoasuvaihtoehdot
<>
<Chip
className="kds-mb-2 kds-mr-2"
deleteButtonAriaLabel="Poista valinta"
label="Chip (primary)"
onDelete={() => console.log("delete")}
variant="primary"
/>
<Chip
appearance="outline"
className="kds-mb-2 kds-mr-2"
deleteButtonAriaLabel="Poista valinta"
label="Chip (primary, outline)"
onDelete={() => console.log("delete")}
variant="primary"
/>
<Chip
className="kds-mb-2 kds-mr-2"
deleteButtonAriaLabel="Poista valinta"
label="Chip (primary-subtle)"
onDelete={() => console.log("delete")}
variant="primary-subtle"
/>
</>
Sisällön räätälöinti
Sisältöä voi kevyesti räätälöidä antamalla label-propin sijasta tekstisisällön lapsielementteinä.
<Chip>
<span aria-hidden>Teksti</span>
<span className="kds-sr-only">Teksti ruudunlukijalle</span>
</Chip>
Elementtien esittäminen listana
Chip-komponenttien esittäminen listana (List) auttaa ruudunlukijakäyttäjiä hahmottamaan rakenteen paremmin.
function ChipsAsList() {
const chips = [
"Asuminen",
"Eläkkeet",
"Kuntoutus",
"Lapsen syntymä ja hoito",
"Omaisen kuolema",
"Opiskelijat",
"Sairastaminen",
"Sotilasavustus",
"Toimeentulotuki",
"Työnantajat",
"Työttömyys",
"Vammaistuet",
];
return (
<List unstyled aria-label="Ryhmää kuvaava nimilappu" className="kds-flex kds-flex-wrap kds-mb-0">
{chips.map((label) => {
return (
<ListItem key={label}>
<Chip
className="kds-mr-2"
deleteButtonAriaLabel={`Poista valinta: ${label}`}
onDelete={() => console.log("delete")}
>
{label}
</Chip>
</ListItem>
);
})}
</List>
);
}
Valintatoiminnon toteuttaminen
Yhden valinta
function SelectableChips() {
const chips = [
"Asuminen",
"Eläkkeet",
"Kuntoutus",
"Lapsen syntymä ja hoito",
"Omaisen kuolema",
"Opiskelijat",
"Sairastaminen",
"Sotilasavustus",
"Toimeentulotuki",
"Työnantajat",
"Työttömyys",
"Vammaistuet",
];
const headingId = useId();
const [selectedChip, setSelectedChip] = useState(undefined);
const handleOnClick = (label: string) => {
setSelectedChip(label === selectedChip ? undefined : label);
};
return (
<>
<Heading as="h5" size={4} id={headingId} mt={0}>
Rajaa elämäntilanteen mukaan
</Heading>
<List unstyled aria-labelledby={headingId} className="kds-flex kds-flex-wrap kds-mb-0">
{chips.map((label) => (
<ListItem key={label}>
<Chip
as="button"
className="kds-mr-2"
isActive={selectedChip === label}
onClick={() => handleOnClick(label)}
variant="primary-subtle"
>
{label}
</Chip>
</ListItem>
))}
</List>
</>
);
}
Useamman valinta
function SelectableChips() {
const chips = [
"Asuminen",
"Eläkkeet",
"Kuntoutus",
"Lapsen syntymä ja hoito",
"Omaisen kuolema",
"Opiskelijat",
"Sairastaminen",
"Sotilasavustus",
"Toimeentulotuki",
"Työnantajat",
"Työttömyys",
"Vammaistuet",
];
const headingId = useId();
const [selectedChips, setSelectedChips] = useState(new Set<string>());
const handleOnClick = (label: string) => {
setSelectedChips((prev) => {
const newSelection = new Set(prev);
if (newSelection.has(label)) {
newSelection.delete(label);
} else {
newSelection.add(label);
}
return newSelection;
});
};
return (
<>
<Heading as="h5" size={4} id={headingId} mt={0}>
Rajaa elämäntilanteen mukaan
</Heading>
<List unstyled aria-labelledby={headingId} className="kds-flex kds-flex-wrap kds-mb-0">
{chips.map((label) => (
<ListItem key={label}>
<Chip
as="button"
className="kds-mr-2"
isActive={selectedChips.has(label)}
onClick={() => handleOnClick(label)}
variant="primary-subtle"
>
{label}
</Chip>
</ListItem>
))}
</List>
</>
);
}