Ny
Denne komponenten er ny eller oppdatert. Tar du den i bruk ønsker vi gjerne innspill til hvordan den fungerer i tjenesten din!
Send innspillIntro
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
Vurder noe annet:
- Navigasjon mellom tab-paneler
- Menyer, f.eks. sidemeny eller hovedmeny
- Statisk metadata (vurder Tag-komponenten)
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
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 implementere 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 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 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>
- Chips extends HTMLUListElement
Chips.Toggle
- as? React.ElementType
- OverridableComponent-api
- selected? boolean
- Toggles aria-pressed and visual-changes
- className? string
- ref? Ref<HTMLButtonElement>
- 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>
- Chips.Removable extends HTMLButtonElement
Tokens
| Token | Fallback |
| --ac-chip-toggle-border | --a-border-default |
| --ac-chip-toggle-bg | --a-surface-neutral-subtle |
| --ac-chip-toggle-hover-border | --a-border-strong |
| --ac-chip-toggle-hover-bg | --a-surface-neutral-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-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 |
