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 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 |
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. |
Usage
Examples
Icons only
Use Tooltip to explain the actions when using only icons.
React
Unable to parse html
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
Unable to parse html
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
Unable to parse html
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 |