Skip to content

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.