Skip to content
Home

Field.Toggle#

Info
Demos
Properties
Events

Demos#

Value On#

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

Value Off#

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

Text On#

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

Text Off#

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

Disabled#

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

Info#

Useful information (?)
<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...
<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...
<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#

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

Boolean value - Off state#

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

Number value - On state#

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

Number value - Off state#

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

Variants#

Switch#

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

Button#

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

Buttons#

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

Buttons with help#

Buttons variant
<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
<Field.Toggle
  valueOn="on"
  valueOff="off"
  variant="radio"
  label="Radio variant"
  value="on"
  onChange={(value) => console.log('onChange', value)}
/>

Radio with help#

Radio variant
<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#

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

Radio button#

Radio button variant
<Field.Toggle
  valueOn="on"
  valueOff="off"
  variant="radio-button"
  label="Radio button variant"
  value="on"
  onChange={(value) => console.log('onChange', value)}
/>
Suggest an edit