Komponenter
Chips
Chips er små interaktive komponenter som styrer visning av innhold.
Egnet til:
- Filtrere data, f.eks. lister eller tabeller.
- Vise valgte filtre.
Uegnet til:
- Menyer, f.eks. sidemeny eller hovedmeny.
- Statisk metadata (se Tag).
- Skjemakomponent.
Eksempler
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:
Changes padding and font-sizes.
className?
- Type:
string
data-color?
- Type:
(string & {}) | AkselColor
ref?
- Type:
LegacyRef<HTMLUListElement>
- Description:
Allows getting a ref to the component instance. Once the component unmounts, React will set
ref.current
tonull
(or call the ref withnull
if you passed a callback ref). React Docs
Chips.Toggle
selected?
- Type:
boolean
- Description:
Toggles aria-pressed and visual changes
variant?
- Type:
"action" | "neutral"
- Default:
""action""
- Description:
Chip-variants
checkmark?
- Type:
boolean
- Default:
true
- Description:
Toggles display of checkmark on selected
className?
- Type:
string
data-color?
- Type:
(string & {}) | AkselColor
ref?
- Type:
LegacyRef<HTMLButtonElement>
- Description:
Allows getting a ref to the component instance. Once the component unmounts, React will set
ref.current
tonull
(or call the ref withnull
if you passed a callback ref). React Docs
as?
- Type:
React.ElementType
- Description:
OverridableComponent-api
Chips.Removable
variant?
- Type:
"action" | "neutral"
- Default:
""action""
- Description:
Chip-variants
onDelete?
- Type:
(() => void)
- Description:
Click callback
className?
- Type:
string
data-color?
- Type:
AkselColor | (string & {})
ref?
- Type:
LegacyRef<HTMLButtonElement>
- Description:
Allows getting a ref to the component instance. Once the component unmounts, React will set
ref.current
tonull
(or call the ref withnull
if you passed a callback ref). React Docs
as?
- Type:
React.ElementType
- Description:
OverridableComponent-api
Tokens
Deprecation warning: I det nye systemet for theming og darkmode, er komponent-tokens fjernet. Mer dokumentasjon for dette kommer, midlertidig dokumentasjon finner du her.
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-circle-border | --a-border-default |
--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 |