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 statusError 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 statusError 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
  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
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>