Components
ToggleGroup
ToggleGroup groups related options. The component consists of a group of buttons that are connected, where only one button can be selected at a time.
React
Unable to parse html
const PreviewEn = () => { return ( <ToggleGroup data-toggle-group='Filter' defaultValue='inbox'> <ToggleGroup.Item value='inbox'>Inbox</ToggleGroup.Item> <ToggleGroup.Item value='drafts'>Drafts</ToggleGroup.Item> <ToggleGroup.Item value='archive'>Archive</ToggleGroup.Item> <ToggleGroup.Item value='sent'>Sent</ToggleGroup.Item> </ToggleGroup> ); }; render(<PreviewEn />)
- 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
- data-toggle-group
- Description
Toggle group label for accessibility
- 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 |
| data-toggle-group | string | - | Toggle group label for accessibility |
ToggleGroupItem
- value
- Description
The value of the ToggleGroupItem. Generates a random value if not set.
- Type
string
- icon
- Description
@deprecated Icon prop is deprecated
- Type
boolean
| Name | Type | Default | Description |
|---|---|---|---|
| value | string | - | The value of the ToggleGroupItem. Generates a random value if not set. |
| icon | boolean | - | @deprecated Icon prop is deprecated |
Usage
Examples
Icons only
Use Tooltip to explain the actions when using only icons.
React
Unable to parse html
const OnlyIconsEn = () => { return ( <ToggleGroup data-toggle-group='Textalignment' defaultValue='option-1'> <Tooltip content='Left aligned'> <ToggleGroup.Item value='option-1'> <AlignLeftIcon aria-hidden /> </ToggleGroup.Item> </Tooltip> <Tooltip content='Center aligned'> <ToggleGroup.Item value='option-2'> <AlignCenterIcon aria-hidden /> </ToggleGroup.Item> </Tooltip> <Tooltip content='Right aligned'> <ToggleGroup.Item value='option-3'> <AlignRightIcon aria-hidden /> </ToggleGroup.Item> </Tooltip> </ToggleGroup> ); }; render(<OnlyIconsEn />)
Controlled
React
Unable to parse html
const ControlledEn = () => { const [value, setValue] = useState<string>('drafts'); return ( <> <ToggleGroup data-toggle-group='Filter' value={value} onChange={setValue}> <ToggleGroup.Item value='inbox'> <EnvelopeClosedIcon aria-hidden /> Inbox </ToggleGroup.Item> <ToggleGroup.Item value='drafts'> <DocPencilIcon aria-hidden /> Drafts </ToggleGroup.Item> <ToggleGroup.Item value='archive'> <ArchiveIcon aria-hidden /> Archive </ToggleGroup.Item> <ToggleGroup.Item value='sent'> <PaperplaneIcon aria-hidden /> Sent </ToggleGroup.Item> </ToggleGroup> <Divider /> <Paragraph>You have selected: {value}</Paragraph> <Button data-size='sm' onClick={() => setValue('archive')}> Select Archive </Button> </> ); }; render(<ControlledEn />)
Secondary variant
React
Unable to parse html
const SecondaryEn = () => { return ( <ToggleGroup data-toggle-group='Filter' defaultValue='inbox' variant='secondary' > <ToggleGroup.Item value='inbox'>Inbox</ToggleGroup.Item> <ToggleGroup.Item value='drafts'>Drafts</ToggleGroup.Item> <ToggleGroup.Item value='archive'>Archive</ToggleGroup.Item> <ToggleGroup.Item value='sent'>Sent</ToggleGroup.Item> </ToggleGroup> ); }; render(<SecondaryEn />)
HTML
If you are using @digdir/designsystemet-web, you can implement ToggleGroup by using the data-toggle-group attribute.
Old way with <button>
With this approach, you need to handle keyboard navigation and ARIA roles yourself. You can read about what you need to do to implement this in the accessibility documentation.
The class name ds-toggle-group is placed on a <div> with role="radiogroup".
Each button in the group is a <button> with class name ds-button with role="radio" and aria-checked which indicates whether the button is selected or not.
data-variant for selected buttons should match data-variant on ToggleGroup.
The remaining buttons should have data-variant="tertiary".
CSS variables and data attributes
| Name | Value |
|---|---|
| --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-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-togglegroup-label | "" |
| --dsc-button-background--active | var(--ds-color-base-active) |
| --dsc-button-background--hover | var(--ds-color-base-hover) |
| --dsc-button-background | var(--ds-color-base-default) |
| --dsc-button-color--active | var(--ds-color-base-contrast-default) |
| --dsc-button-color--hover | var(--ds-color-base-contrast-default) |
| --dsc-button-color | var(--ds-color-base-contrast-default) |
| --dsc-button-border-color | var(--ds-color-border-default) |
| Name | Value |
|---|---|
| data-icon | |
| data-variant | secondary |