Skip to content
Home

Toggle

Info
Demos
Properties
Events

Description

Field.Toggle is a base component for allowing the user to toggle between two different values in the target data point.

Demos

On state

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

Off state

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

No value

Code Editor
<Field.Toggle
  valueOn="checked"
  valueOff="unchecked"
  variant="checkbox"
  label="Label text"
  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={new FormError("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 FormError('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

Button

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

Buttons

Code Editor
<Field.Toggle
  valueOn="on"
  valueOff="off"
  variant="buttons"
  label="Buttons variant"
  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)}
/>