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

HTML

HTMLReact

Press Enter to start editing

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 />)

Usage

If you are using @digdir/designsystemet-web, you can implement toggle group by using the data-toggle-group attribute.

<fieldset  class="ds-toggle-group"  data-toggle-group="Text alignment"  data-variant="secondary">  <label class="ds-button" data-variant="tertiary">    <input type="radio" name="alignment-two" value="left" checked />    Leftadjusted  </label>  <label class="ds-button" data-variant="tertiary">    <input type="radio" name="alignment-two" value="center" />    Centered  </label>  <label class="ds-button" data-variant="tertiary">    <input type="radio" name="alignment-two" 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.

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 toggle group. The remaining buttons should have data-variant="tertiary".

<div class="ds-toggle-group" role="radiogroup" data-variant="primary">  <button    class="ds-button"    data-variant="primary"    type="button"    id="togglegroup-item-1"    aria-checked="true"    aria-current="true"    role="radio"  >    Inbox  </button>  <button    class="ds-button"    data-variant="tertiary"    type="button"    id="togglegroup-item-2"    aria-checked="false"    aria-current="false"    role="radio"  >    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-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)

Data Attributes
Name	Value
data-icon
data-variant	secondary

React

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

Controlled example

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 | (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)