Skip to content
Home

ToggleButton

Info
Demos
Properties
Events

Import

import { ToggleButton } from '@dnb/eufemia'

Description

The ToggleButton component is used to toggle on or off a limited number of choices.

Relevant links

You can use the React component <ToggleButton.Group> to wrap several ToggleButton components. This makes it easier to handle the on_change event at a higher level, as well as several other context-related properties.

By default, the ToggleButton.Group is single-select, like a Radio button. However, you can easily enable multiselect as well.

How to use

You can use the ToggleButton in different modes. Either as a stand-alone component or together with the ToggleButton.Group context.

Multi-select

If multiselect is enabled on the group, several items can be enabled or disabled by the user.

You need to decide if you want to track the state yourself by using the checked property, or if you want to listen to the internal state with on_change(({ values }) => console.log(values)). In this case, you also need to give every item a value property.

Demos

Unchecked ToggleButton

Code Editor
<ToggleButton label="Label" text="Toggle Me" />

Checked ToggleButton

Code Editor
<ToggleButton
  label="Label"
  text="Checked ToggleButton"
  checked
  on_change={({ checked }) => {
    console.log('on_change', checked)
  }}
/>

Default ToggleButton group

ToggleButton Group
Code Editor
<ToggleButton.Group
  label="ToggleButton Group"
  value="first"
  on_change={({ value }) => {
    console.log('on_change', value)
  }}
>
  <ToggleButton text="First" value="first" />
  <ToggleButton text="Second" value="second" />
  <ToggleButton text="Third" value="third" />
</ToggleButton.Group>

Multi-select ToggleButton group

Multi-select
Code Editor
<ToggleButton.Group
  label="Multi-select"
  multiselect={true}
  values={['first', 'third']}
  on_change={({ values }) => {
    console.log('on_change', values)
  }}
>
  <ToggleButton text="First" value="first" />
  <ToggleButton text="Second" value="second" />
  <ToggleButton text="Third" value="third" />
</ToggleButton.Group>

Vertical aligned ToggleButton group with checkbox variant and multiselect

Vertical Group
Code Editor
<ToggleButton.Group
  label="Vertical Group"
  layout_direction="column"
  multiselect={true}
  variant="checkbox"
  on_change={({ values }) => {
    console.log('on_change', values)
  }}
>
  <ToggleButton text="First" value="first" />
  <ToggleButton text="Second" value="second" />
  <ToggleButton text="Third" value="third" checked />
</ToggleButton.Group>

ToggleButton group as multiselect with a status message

ToggleButton Group with statusError message
Code Editor
<ToggleButton.Group
  label="ToggleButton Group with status"
  status="Error message"
  multiselect={true}
  on_change={({ values }) => {
    console.log('on_change', values)
  }}
>
  <ToggleButton text="First" value="first" />
  <ToggleButton text="Second" value="second" checked />
  <ToggleButton text="Third" value="third" checked={true} />
</ToggleButton.Group>

ToggleButton with status messages and a group variant as radio

ToggleButtons with statusError messageInfo message
Code Editor
<ToggleButton.Group
  label="ToggleButtons with status"
  variant="radio"
  on_change={({ value }) => {
    console.log('on_change', value)
  }}
>
  <ToggleButton text="First" value="first" status="error" />
  <ToggleButton
    text="Second"
    value="second"
    checked
    status="Error message"
  />
  <ToggleButton
    text="Third"
    value="third"
    status="Info message"
    status_state="info"
  />
</ToggleButton.Group>

Disabled ToggleButton group

Disabled Group
Code Editor
<ToggleButton.Group
  label="Disabled Group"
  disabled
  value="first"
  variant="checkbox"
>
  <ToggleButton text="First" value="first" />
  <ToggleButton text="Second" value="second" />
  <ToggleButton text="Third" value="third" checked />
</ToggleButton.Group>

ToggleButtons with a suffix

With suffixesError message
Code Editor
<ToggleButton.Group
  label="With suffixes"
  suffix={<HelpButton title="Group suffix">Group suffix</HelpButton>}
>
  <ToggleButton text="First" value="first" />
  <ToggleButton
    text="Second"
    value="second"
    status="Error message"
    suffix={<HelpButton title="Button suffix">Button suffix</HelpButton>}
  />
  <ToggleButton text="Third" value="third" checked />
</ToggleButton.Group>

ToggleButtons with icons only

Icons only
Code Editor
<ToggleButton.Group label="Icons only">
  <ToggleButton icon="bell" value="first" checked />
  <ToggleButton icon="loupe" value="second" />
  <ToggleButton icon="calendar" value="third" />
</ToggleButton.Group>