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.

When to use ToggleButton vs Eufemia Forms

Classic form components like this one are presentational controls. They handle the styling, sizing, icons, and basic events, while you manage their value, validation, and error handling yourself.

For most data input and forms situations, use Eufemia Forms fields instead. They build on these same components, but add data handling, validation, and error messages through the surrounding Form.Handler. Browse the field components to find the one that matches your data.

Reach for a classic component when you need it standalone outside of a form context, or when you handle the value and validation yourself.

The Eufemia Forms equivalent of ToggleButton is Field.Selection with the buttons variant (variant="buttons"), or Field.Boolean with the button variant for on/off choices.

Relevant links

Accessibility

ToggleButton components use role="button" with aria-pressed to communicate their state to assistive technologies. When used in a group, navigation between buttons is possible using arrow keys, following standard toolbar interaction patterns.

You can use the React component <ToggleButton.Group> to wrap several ToggleButton components. This makes it easier to handle the onChange 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 onChange(({ values }) => console.log(values)). In this case, you also need to give every item a value property.

Related components

ToggleButton is part of the Input category. Other components for similar needs:

  • Autocomplete — to help people find and choose from matching suggestions as they type.
  • Checkbox — when people can turn one or more options on or off.
  • DatePicker — when people need to choose one date or a date range.
  • Dropdown — when people need to choose one option from a list.
  • Filter — to help people narrow down a list or data set.
  • FormLabel — to name an input, control, or form-related field.

See all in Input →

Demos

Unchecked ToggleButton

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

Checked ToggleButton

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

Default ToggleButton group

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

Multi-select ToggleButton group

Multi-select
<ToggleButton.Group
  label="Multi-select"
  multiselect={true}
  values={['first', 'third']}
  onChange={({ values }) => {
    console.log('onChange', 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
<ToggleButton.Group
  label="Vertical Group"
  layoutDirection="column"
  multiselect={true}
  variant="checkbox"
  onChange={({ values }) => {
    console.log('onChange', 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
<ToggleButton.Group
  label="ToggleButton Group with status"
  status="Error message"
  multiselect={true}
  onChange={({ values }) => {
    console.log('onChange', 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
<ToggleButton.Group
  label="ToggleButtons with status"
  variant="radio"
  onChange={({ value }) => {
    console.log('onChange', 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"
    statusState="information"
  />
</ToggleButton.Group>

Disabled ToggleButton group

Disabled Group
<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
<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
<ToggleButton.Group label="Icons only">
  <ToggleButton icon="bell" value="first" checked />
  <ToggleButton icon="loupe" value="second" />
  <ToggleButton icon="calendar" value="third" />
</ToggleButton.Group>