Components

Toggle group

Toggle group groups related options. The component consists of a group of buttons that are connected, where only one button can be selected at a time.

Overview Code Accessibility

HTMLReact

Press Enter to start editing

Unable to parse html

const PreviewEn = () => {
  return (
    <ToggleGroup aria-label='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 />)

Usage

If you are using @digdir/designsystemet-web, you can implement toggle group by using the focusgroup="radiogroup" and aria-label attributes. Note that focusgroup is a upcoming W3C standard, currently only supported in Chrome. The design system automatically adds a polyfill to provide support in all browsers.

<fieldset  class="ds-toggle-group"  focusgroup="radiogroup"  aria-label="Text alignment"  data-variant="secondary">  <label class="ds-button">    <input type="radio" name="alignment" value="left" checked />    Leftadjusted  </label>  <label class="ds-button">    <input type="radio" name="alignment" value="center" />    Centered  </label>  <label class="ds-button">    <input type="radio" name="alignment" value="right" />    Rightadjusted  </label></fieldset>

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. Each button in the group is a <button> with class name ds-button and aria-checked which indicates whether the button is selected or not.

<div  class="ds-toggle-group"  focusgroup="radiogroup"  aria-label="Filter"  data-variant="primary">  <button    class="ds-button"    type="button"    id="togglegroup-item-1"    aria-checked="true"  >    Inbox  </button>  <button    class="ds-button"    type="button"    id="togglegroup-item-2"    aria-checked="false"  >    Sent  </button></div>

CSS variables and data attributes

Sizes are controlled with data-size and colors with data-color. The component will inherit from the closest parent where these are set.

CSS Variables
Name	Value
--dsc-button-background	transparent
--dsc-button-background--active	var(--ds-color-surface-active)
--dsc-button-background--hover	var(--ds-color-surface-hover)
--dsc-button-border-color	var(--ds-color-border-default)
--dsc-button-color	inherit
--dsc-button-color--active	var(--dsc-button-color)
--dsc-button-color--hover	var(--ds-color-text-default)
--dsc-togglegroup-background	var(--ds-color-surface-default)
--dsc-togglegroup-border-color	var(--ds-color-border-default)
--dsc-togglegroup-border-radius	var(--ds-border-radius-default)
--dsc-togglegroup-border-style	solid
--dsc-togglegroup-border-width	var(--ds-border-width-default)
--dsc-togglegroup-button-size	var(--ds-size-12)
--dsc-togglegroup-color	var(--ds-color-text-default)
--dsc-togglegroup-label	""
--dsc-togglegroup-spacing	0

Data Attributes
Name	Value
data-icon
data-variant	secondary, tertiary

React

import { ToggleGroup } from "@digdir/designsystemet-react";
<ToggleGroup aria-label="Options" defaultValue="option1">  <ToggleGroup.Item value="option1">Option 1</ToggleGroup.Item>  <ToggleGroup.Item value="option2">Option 2</ToggleGroup.Item></ToggleGroup>;

Controlled example

ToggleGroup

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 @deprecated Use aria-label or aria-labelledby instead.
Type: string

aria-label
Type: string

aria-labelledby
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 @deprecated Use aria-label or aria-labelledby instead.
aria-label	`string`	-	-
aria-labelledby	`string`	-	-

ToggleGroupItem

value
Description: The value of the ToggleGroupItem. Generates a random value if not set.
Type: string | (string & readonly string[])

icon
Description: @deprecated Icon prop is deprecated
Type: boolean

Name	Type	Default	Description
value	`string \| (string & readonly string[])`	-	The value of the ToggleGroupItem. Generates a random value if not set.
icon	`boolean`	-	@deprecated Icon prop is deprecated

Edit this page on github.com (opens in a new tab)