Skip to content
Home

Toggle

Info
Demos
Properties
Events

Demos

Value On

Code Editor
<Field.Toggle
  valueOn="checked"
  valueOff="unchecked"
  variant="checkbox"
  label="Label text"
  value="checked"
  onChange={(value) => console.log('onChange', value)}
/>

Value Off

Code Editor
<Field.Toggle
  valueOn="checked"
  valueOff="unchecked"
  variant="checkbox"
  label="Label text"
  value="unchecked"
  onChange={(value) => console.log('onChange', value)}
/>

Text On

Code Editor
<Field.Toggle
  valueOn="checked"
  valueOff="unchecked"
  textOn="Text on"
  textOff="Text off"
  variant="checkbox"
  value="checked"
  onChange={(value) => console.log('onChange', value)}
/>

Text Off

Code Editor
<Field.Toggle
  valueOn="checked"
  valueOff="unchecked"
  textOn="Text on"
  textOff="Text off"
  variant="checkbox"
  value="unchecked"
  onChange={(value) => console.log('onChange', value)}
/>

Disabled

Code Editor
<Field.Toggle
  valueOn="checked"
  valueOff="unchecked"
  variant="checkbox"
  label="Label text"
  onChange={(value) => console.log('onChange', value)}
  disabled
/>

Info

Useful information (?)
Code Editor
<Field.Toggle
  valueOn="checked"
  valueOff="unchecked"
  variant="checkbox"
  label="Label text"
  onChange={(value) => console.log('onChange', value)}
  info="Useful information (?)"
/>

Warning

I'm warning you...
Code Editor
<Field.Toggle
  valueOn="checked"
  valueOff="unchecked"
  variant="checkbox"
  label="Label text"
  onChange={(value) => console.log('onChange', value)}
  warning="I'm warning you..."
/>

Error

This is what is wrong...
Code Editor
<Field.Toggle
  valueOn="checked"
  valueOff="unchecked"
  variant="checkbox"
  label="Label text"
  onChange={(value) => console.log('onChange', value)}
  error={new Error('This is what is wrong...')}
/>

Value types

Boolean value - On state

Code Editor
<Field.Toggle
  valueOn={true}
  valueOff={false}
  variant="checkbox"
  label="Boolean value"
  value={true}
  onChange={(value) => console.log('onChange', value)}
/>

Boolean value - Off state

Code Editor
<Field.Toggle
  valueOn={true}
  valueOff={false}
  variant="checkbox"
  label="Boolean value"
  value={false}
  onChange={(value) => console.log('onChange', value)}
/>

Number value - On state

Code Editor
<Field.Toggle
  valueOn={100}
  valueOff={0}
  variant="checkbox"
  label="Number value"
  value={100}
  onChange={(value) => console.log('onChange', value)}
/>

Number value - Off state

Code Editor
<Field.Toggle
  valueOn={100}
  valueOff={0}
  variant="checkbox"
  label="Number value"
  value={0}
  onChange={(value) => console.log('onChange', value)}
/>

Variants

Switch

Code Editor
<Field.Toggle
  valueOn="on"
  valueOff="off"
  variant="switch"
  label="Switch variant"
  value="on"
  onChange={(value) => console.log('onChange', value)}
/>

Button

Code Editor
<Field.Toggle
  valueOn="on"
  valueOff="off"
  variant="button"
  label="Toggle button variant"
  value="on"
  onChange={(value) => console.log('onChange', value)}
/>

Buttons

Buttons variant
Code Editor
<Field.Toggle
  valueOn="on"
  valueOff="off"
  variant="buttons"
  label="Buttons variant"
  value="on"
  onChange={(value) => console.log('onChange', value)}
/>

Buttons with help

Buttons variant
Code Editor
<Field.Toggle
  valueOn="on"
  valueOff="off"
  variant="buttons"
  label="Buttons variant"
  help={{
    title: 'Help title',
    content: 'Help content',
  }}
  value="on"
  onChange={(value) => console.log('onChange', value)}
/>

Radio

Radio variant
Code Editor
<Field.Toggle
  valueOn="on"
  valueOff="off"
  variant="radio"
  label="Radio variant"
  value="on"
  onChange={(value) => console.log('onChange', value)}
/>

Radio with help

Radio variant
Code Editor
<Field.Toggle
  valueOn="on"
  valueOff="off"
  variant="radio"
  label="Radio variant"
  help={{
    title: 'Help title',
    content: 'Help content',
  }}
  value="on"
  onChange={(value) => console.log('onChange', value)}
/>

Checkbox button

Code Editor
<Field.Toggle
  valueOn="on"
  valueOff="off"
  variant="checkbox-button"
  label="Toggle checkbox variant"
  value="on"
  onChange={(value) => console.log('onChange', value)}
/>