Skip to content
Home

ToggleButton

Info
Demos
Properties
Events

Description

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

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

By default the ToggleButton.Group is single-select, like a Radio button. But 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/disabled by the user.

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

Demos

Unchecked ToggleButton

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

Checked ToggleButton

<ToggleButton

  label="Label:"

  text="Checked ToggleButton"

  checked

  on_change={({ checked }) => {

    console.log('on_change', checked)

  }}

/>

Default ToggleButton group

ToggleButton Group:
<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:
<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:
<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 status:
Error message
<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 status:
Error messageInfo message
<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:
<ToggleButton.Group label="Disabled Group:" disabled 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 suffixes:
Error 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>