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
const PreviewEn = () => { return ( <ToggleGroup 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
| 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 |
Usage
Examples
Icons only
Use Tooltip to explain the actions when using only icons.
React
const OnlyIconsEn = () => { return ( <ToggleGroup defaultValue='option-1'> <Tooltip content='Left aligned'> <ToggleGroup.Item value='option-1' icon> <AlignLeftIcon aria-hidden /> </ToggleGroup.Item> </Tooltip> <Tooltip content='Center aligned'> <ToggleGroup.Item value='option-2' icon> <AlignCenterIcon aria-hidden /> </ToggleGroup.Item> </Tooltip> <Tooltip content='Right aligned'> <ToggleGroup.Item value='option-3' icon> <AlignRightIcon aria-hidden /> </ToggleGroup.Item> </Tooltip> </ToggleGroup> ); }; render(<OnlyIconsEn />)
Controlled
React
const ControlledEn = () => { const [value, setValue] = useState<string>('drafts'); return ( <> <ToggleGroup 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
const SecondaryEn = () => { return ( <ToggleGroup 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
JavaScript is also needed to handle focus. 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-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) |
| Name | Value |
|---|---|
| data-variant | secondary |
| data-icon |