Skip to content
Home

ToggleButton

Info
Demos
Properties
Events

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>