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
Unable to parse html
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 |
ToggleGroupItem
- value
- Description
The value of the ToggleGroupItem. Generates a random value if not set.
- Type
string
- type
- Description
Specify the type of button. Unset when `asChild` is true
- Type
"submit" | "reset" | "button"- Default
'button'
- icon
- Description
Toggle icon only styling, pass icon as children When combined with loading, the loading-icon will be shown instead of the icon.
- Type
boolean- Default
false
- asChild
- Description
Change the default rendered element for the one passed as a child, merging their props and behavior.
- Type
boolean- Default
false
| Name | Type | Default | Description |
|---|---|---|---|
| value | string | - | The value of the ToggleGroupItem. Generates a random value if not set. |
| type | "submit" | "reset" | "button" | 'button' | Specify the type of button. Unset when `asChild` is true |
| icon | boolean | false | Toggle icon only styling, pass icon as children When combined with loading, the loading-icon will be shown instead of the icon. |
| asChild | boolean | false | Change the default rendered element for the one passed as a child, merging their props and behavior. |
Bruk
Eksempel
Kun ikoner
Bruk Tooltip for å forklare handlingane når du brukar berre ikon.
React
Unable to parse html
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
Unable to parse html
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
Unable to parse html
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 |