Intro
Løsningene vi lager har ofte behov for handlinger som ikke er "primære" eller at det ikke passer å bruke Buttons. Chips er små interaktive komponenter som manipulerer data eller visning av data.
Egnet til:
- Filtrere data, f.eks. lister og tabeller
- Vise filter som er aktivt
Uegnet til:
- Navigasjon mellom tab-paneler
- Menyer, f.eks. sidemeny eller hovedmeny
- Statisk metadata (se Tag-komponenten)
Eksempler
Toggle chip brukes til filtrering av innhold og data.
Toggle chip brukes til filtrering av innhold og data.
Removable chip viser valgte verdier som brukeren kan fjerne.
Removable chip viser valgte verdier som brukeren kan fjerne.
Varianter
Toggle chip
Toggle chip brukes til filtrering av innhold og data. Når en eller flere chips velges vil innholdet endres til å vise kun det som er valgt. Det betyr at du implementerer om brukeren selv skal kunne velge ett eller flere alternativer.
Removable chip
Removable chip viser valgte verdier som brukeren kan fjerne. For eksempel valgte filter eller verdier som brukeren har skrevet i tekstfelt.
Retningslinjer
Antall valg
Om du bruker ToggleChips uten Checkmark blir det litt vanskeligere for brukerne å skjønne hva som er valgt. Antallet valg vil hjelpe. Det må minimum være 3 valg om du bruker ToggleChip uten Chackmark.
Filtrere innhold
Toggle chips gjør det veldig synlig for brukeren hva som er valgt. Disse kan være et bedre alternativ enn Select avhengig av antall valg du vil at brukeren skal kunne se på samme tid.
Chips-grupper
Måten chips kan organiseres på er en fordel når det ikke er masse plass til overs. Chips kan grupperes i en rad eller som en sky. Som sky vil gruppen med chips tilpasse seg plassen den får. Chips er ikke designet for å grupperes loddrett.
Avstand
Chips er ganske små. Derfor må vi ha god avstand mellom chips, og mellom andre interaktive elementer. Chips har en standard spacing mellom seg, men det du kan bruke større avstand om du ønsker det.
Nullstille alt
Du kan implementere både toggle chips og removable chips sånn at brukeren kan nullstille alt på en gang.
Se også
Tilgjengelighet
Interaksjon med tastatur
| Kommando | Interaksjon |
|---|---|
| Mellomrom | Fjern/toggle verdi |
| Enter | Fjern/toggle verdi |
| Tab | Flytt fokus til neste chip |
| Shift+++Tab | Flytt fokus til forrige chip |
Interaksjon med skjermleser
Dersom informasjonen på siden blir dynamisk oppdatert når brukeren interagerer med chips'ene, må du sikre at skjermleser- og leselistbrukere blir informert om endringene. Dette kan du gjøre med en ARIA live region som leser opp hvordan dataen som er filtrert endrer seg som et resultat av brukerens interaksjon, f.eks. "Viser 5 resultater".
Props
Chips
- size?"medium" | "small"
- Changes padding and font-sizes
- className? string
- ref? Ref<HTMLUListElement>
- Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom
- Chips extends HTMLUListElement
Chips.Toggle
- as? React.ElementType
- OverridableComponent-api
- selected? boolean
- Toggles aria-pressed and visual-changes
- variant?"action" | "neutral"
- Chip-variants
- checkmark?boolean
- Toggles display of checkmark on selected
- className? string
- ref? Ref<HTMLButtonElement>
- Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom
- Chips.Toggle extends HTMLButtonElement
Chips.Removable
- as? React.ElementType
- OverridableComponent-api
- variant?"action" | "neutral"
- Chip-variants
- removeLabel?string
- Replaces label read for screen-readers
- onDelete? (() => void)
- Click callback
- className? string
- ref? Ref<HTMLButtonElement>
- Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom
- Chips.Removable extends HTMLButtonElement
Tokens
| Token | Fallback |
|---|---|
| --ac-chip-toggle-border | --a-border-subtle |
| --ac-chip-toggle-bg | --a-surface-action-subtle |
| --ac-chip-toggle-text | --a-text-default |
| --ac-chip-toggle-hover-border | --a-border-subtle-hover |
| --ac-chip-toggle-hover-bg | --a-surface-action-subtle-hover |
| --ac-chip-toggle-pressed-bg | --a-surface-action-selected |
| --ac-chip-toggle-pressed-text | --a-text-on-action |
| --ac-chip-toggle-pressed-hover-bg | --a-surface-action-selected-hover |
| --ac-chip-toggle-neutral-border | --a-border-subtle |
| --ac-chip-toggle-neutral-bg | --a-surface-neutral-subtle |
| --ac-chip-toggle-neutral-text | --a-text-default |
| --ac-chip-toggle-neutral-hover-border | --a-border-subtle-hover |
| --ac-chip-toggle-neutral-hover-bg | --a-surface-neutral-subtle-hover |
| --ac-chip-toggle-neutral-pressed-bg | --a-surface-neutral-selected |
| --ac-chip-toggle-neutral-pressed-text | --a-text-on-neutral |
| --ac-chip-toggle-neutral-pressed-hover-bg | --a-surface-neutral-selected |
| --ac-chip-toggle-focus | --a-border-focus |
| --ac-chip-removable-action-bg | --a-surface-action-selected |
| --ac-chip-removable-action-text | --a-text-on-action |
| --ac-chip-removable-neutral-bg | --a-surface-neutral-subtle |
| --ac-chip-removable-neutral-text | --a-text-default |
| --ac-chip-removable-neutral-border | --a-border-default |
| --ac-chip-removable-action-hover-bg | --a-surface-action-selected-hover |
| --ac-chip-removable-neutral-hover-bg | --a-surface-neutral-subtle-hover |
| --ac-chip-removable-neutral-hover-border | --a-border-strong |
