Skip to content
Home

ToggleButton

Info
Demos
Properties
Events

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 status:
Error 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 status:
Error 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 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
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>