Komponenter
ToggleGroup
ToggleGroup samler relaterte alternativ. Komponenten består av ei gruppe knappar som heng saman, der berre éin knapp er mogleg å velje om gongen.
React
const Preview = () => { return ( <ToggleGroup defaultValue='innboks'> <ToggleGroup.Item value='innboks'>Innboks</ToggleGroup.Item> <ToggleGroup.Item value='utkast'>Utkast</ToggleGroup.Item> <ToggleGroup.Item value='arkiv'>Arkiv</ToggleGroup.Item> <ToggleGroup.Item value='sendt'>Sendt</ToggleGroup.Item> </ToggleGroup> ); }; render(<Preview />)
- variant
- Description
Specify which variant to use
- Type
"primary" | "secondary"- Default
primary
- value
- Description
Controlled state for `ToggleGroup` component.
- Type
string
- defaultValue
- Description
Default value.
- Type
string
- onChange
- Description
Callback with selected `ToggleGroupItem` `value`
- Type
(value: string) => void
- name
- Description
Form element name
- Type
string
| Name | Type | Default | Description |
|---|---|---|---|
| variant | "primary" | "secondary" | primary | Specify which variant to use |
| value | string | - | Controlled state for `ToggleGroup` component. |
| defaultValue | string | - | Default value. |
| onChange | (value: string) => void | - | Callback with selected `ToggleGroupItem` `value` |
| name | string | - | Form element name |
Bruk
Eksempel
Kun ikoner
Bruk Tooltip for å forklare handlingane når du brukar berre ikon.
React
const OnlyIcons = () => { return ( <ToggleGroup defaultValue='option-1'> <Tooltip content='Venstrestilt'> <ToggleGroup.Item value='option-1' icon> <AlignLeftIcon aria-hidden /> </ToggleGroup.Item> </Tooltip> <Tooltip content='Midtstilt'> <ToggleGroup.Item value='option-2' icon> <AlignCenterIcon aria-hidden /> </ToggleGroup.Item> </Tooltip> <Tooltip content='Høyrestilt'> <ToggleGroup.Item value='option-3' icon> <AlignRightIcon aria-hidden /> </ToggleGroup.Item> </Tooltip> </ToggleGroup> ); }; render(<OnlyIcons />)
Kontrollert
React
const Controlled = () => { const [value, setValue] = useState<string>('utkast'); return ( <> <ToggleGroup value={value} onChange={setValue}> <ToggleGroup.Item value='innboks'> <EnvelopeClosedIcon aria-hidden /> Innboks </ToggleGroup.Item> <ToggleGroup.Item value='utkast'> <DocPencilIcon aria-hidden /> Utkast </ToggleGroup.Item> <ToggleGroup.Item value='arkiv'> <ArchiveIcon aria-hidden /> Arkiv </ToggleGroup.Item> <ToggleGroup.Item value='sendt'> <PaperplaneIcon aria-hidden /> Sendt </ToggleGroup.Item> </ToggleGroup> <Divider /> <Paragraph>Du har valgt: {value}</Paragraph> <Button data-size='sm' onClick={() => setValue('arkiv')}> Velg Arkiv </Button> </> ); }; render(<Controlled />)
Secondary variant
React
const Secondary = () => { return ( <ToggleGroup defaultValue='innboks' variant='secondary'> <ToggleGroup.Item value='innboks'>Innboks</ToggleGroup.Item> <ToggleGroup.Item value='utkast'>Utkast</ToggleGroup.Item> <ToggleGroup.Item value='arkiv'>Arkiv</ToggleGroup.Item> <ToggleGroup.Item value='sendt'>Sendt</ToggleGroup.Item> </ToggleGroup> ); }; render(<Secondary />)
HTML
Det trengst også javascript for å håndtere fokus. Du kan lese om kva du må gjere for å implementere dette i tilgjengelighetsdokumentasjonen.
Klassenavnet ds-toggle-group blir lagt på ein <div> med role="radiogroup".
Kvar knapp i gruppa er ein <button> med klassenavn ds-button med role="radio" og aria-checked som indikerer om knappen er vald eller ikkje.
data-variant for valde knappar skal stemme med data-variant på ToggleGroup.
Resterande knappar skal ha data-variant="tertiary".
CSS variablar og data-attributter
| Navn | Verdi |
|---|---|
| --dsc-togglegroup-background | var(--ds-color-surface-default) |
| --dsc-togglegroup-border-width | var(--ds-border-width-default) |
| --dsc-togglegroup-border-style | solid |
| --dsc-togglegroup-border-color | var(--ds-color-border-default) |
| --dsc-togglegroup-text-color | var(--ds-color-text-default) |
| --dsc-togglegroup-spacing | 0 |
| --dsc-togglegroup-border-radius | var(--ds-border-radius-default) |
| --dsc-togglegroup-button-size | var(--ds-size-12) |
| --dsc-button-color | var(--ds-color-text-default) |
| --dsc-button-color--hover | var(--ds-color-text-default) |
| --dsc-button-border-color | var(--ds-color-text-default) |
| Navn | Verdi |
|---|---|
| data-variant | secondary |
| data-icon |