Skip to content
Home

Toggle

Info
Demos
Properties
Events

Demos

On state

<Field.Toggle

  valueOn="checked"

  valueOff="unchecked"

  variant="checkbox"

  label="Label text"

  value="checked"

  onChange={(value) => console.log('onChange', value)}

/>

Off state

<Field.Toggle

  valueOn="checked"

  valueOff="unchecked"

  variant="checkbox"

  label="Label text"

  value="unchecked"

  onChange={(value) => console.log('onChange', value)}

/>

No value

<Field.Toggle

  valueOn="checked"

  valueOff="unchecked"

  variant="checkbox"

  label="Label text"

  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={new FormError("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 FormError('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

Button

<Field.Toggle

  valueOn="on"

  valueOff="off"

  variant="button"

  label="Toggle button variant"

  value="on"

  onChange={(value) => console.log('onChange', value)}

/>

Buttons

<Field.Toggle

  valueOn="on"

  valueOff="off"

  variant="buttons"

  label="Buttons variant"

  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)}

/>