Intro
Chips er små interaktive komponenter som styrer visning av innhold.
Eksempler
Toggle chip brukes til filtrering av innhold. Du velger selv om brukeren skal kunne velge én eller flere alternativer om gangen.
Hvis du slår av checkmark må det være minst 3 chips, slik at det er mulig å se hvilken som er valgt.
Removable chips viser valgte verdier som brukeren kan fjerne, for eksempel valgte filter eller verdier som brukeren har skrevet i tekstfelt.
Retningslinjer
Antall valg
Ved bruk av ToggleChips uten Checkmark må det være minst 3 valg, slik at det er mulig å se hvilken som er valgt.
Filtrere innhold
I en filtermeny er ToggleChips godt egnet hvis du ønsker at alle valgene skal være synlig for brukeren.
Chips-grupper
Chips er laget for å grupperes i en rad eller som en sky. Som sky vil gruppen med chips tilpasse seg plassen den får.
Tilgjengelighet
Hvis deler av siden oppdateres når brukeren interagerer med Chips, må du sikre at skjermleserbrukere informeres. Dette kan gjøres med en ARIA live region som viser antall treff eller andre endringer.
Se også
Props
Chips
size?
- Type:
"medium" | "small"
- Default:"medium"
- Description:
className?
- Type:
string
ref?
- Type:
LegacyRef<HTMLUListElement>
- Description:
Chips.Toggle
as?
- Type:
React.ElementType
- Description:
selected?
- Type:
boolean
- Description:
variant?
- Type:
"action" | "neutral"
- Default:action
- Description:
checkmark?
- Type:
boolean
- Default:true
- Description:
className?
- Type:
string
ref?
- Type:
LegacyRef<HTMLButtonElement>
- Description:
Chips.Removable
as?
- Type:
React.ElementType
- Description:
variant?
- Type:
"action" | "neutral"
- Default:action
- Description:
removeLabel?
- Type:
string
- Default:slett
- Description:
onDelete?
- Type:
(() => void)
- Description:
className?
- Type:
string
ref?
- Type:
LegacyRef<HTMLButtonElement>
- Description: