Skip to content
Home

Field.Boolean#

Info
Demos
Properties
Events

Demos#

No label or value#

<Field.Boolean onChange={(value) => console.log('onChange', value)} />

Checkbox#

Value true#

<Field.Boolean
  variant="checkbox"
  label="Label text"
  value={true}
  onChange={(value) => console.log('onChange', value)}
/>

Value false#

<Field.Boolean
  variant="checkbox"
  label="Label text"
  value={false}
  onChange={(value) => console.log('onChange', value)}
/>

Checkbox - Required#

<Field.Boolean
  variant="checkbox"
  label="Set to be required initially"
  onChange={(value) => console.log('onChange', value)}
  validateInitially
  required
/>

Checkbox - Disabled#

<Field.Boolean
  variant="checkbox"
  label="I am disabled"
  onChange={(value) => console.log('onChange', value)}
  disabled
/>

Checkbox - prevent changing the state of the checkbox#

You can prevent the state of the checkbox from changing by calling preventDefault on the onClick event.

<Field.Boolean
  variant="checkbox"
  label="I will never change the state"
  onClick={(value, { event }) => {
    event.preventDefault()
  }}
  onChange={(value) => console.log('onChange', value)}
/>

Checkbox - Error#

This is what is wrong...
<Field.Boolean
  variant="checkbox"
  label="Label text"
  onChange={(value) => console.log('onChange', value)}
  error={new Error('This is what is wrong...')}
/>

Checkbox - With Help#

<Field.Boolean
  variant="checkbox"
  label="Checkbox variant"
  help={{
    title: 'Help title',
    content: 'Help content',
  }}
/>

Button#

Value true#

<Field.Boolean
  variant="button"
  label="Label text"
  value={true}
  onChange={(value) => console.log('onChange', value)}
/>

Button - Value false#

<Field.Boolean
  variant="button"
  label="Label text"
  value={false}
  onChange={(value) => console.log('onChange', value)}
/>

Button - Required#

<Field.Boolean
  variant="button"
  label="Set to be required initially"
  onChange={(value) => console.log('onChange', value)}
  validateInitially
  required
/>

Button - Disabled#

<Field.Boolean
  variant="button"
  label="I am disabled"
  onChange={(value) => console.log('onChange', value)}
  disabled
/>

Button - Error#

This is what is wrong...
<Field.Boolean
  variant="button"
  label="Label text"
  onChange={(value) => console.log('onChange', value)}
  error={new Error('This is what is wrong...')}
/>

Checkbox button#

Value true#

<Field.Boolean
  variant="checkbox-button"
  label="Label text"
  value={true}
  onChange={(value) => console.log('onChange', value)}
/>

Checkbox button - Value false#

<Field.Boolean
  variant="checkbox-button"
  label="Label text"
  value={false}
  onChange={(value) => console.log('onChange', value)}
/>

Checkbox button - Required#

<Field.Boolean
  variant="checkbox-button"
  label="Set to be required initially"
  onChange={(value) => console.log('onChange', value)}
  validateInitially
  required
/>

Checkbox button - Disabled#

<Field.Boolean
  variant="checkbox-button"
  label="I am disabled"
  onChange={(value) => console.log('onChange', value)}
  disabled
/>

Checkbox button - Error#

This is what is wrong...
<Field.Boolean
  variant="checkbox-button"
  label="Label text"
  onChange={(value) => console.log('onChange', value)}
  error={new Error('This is what is wrong...')}
/>

Radio button#

Value true#

Label text
<Field.Boolean
  variant="radio-button"
  label="Label text"
  value={true}
  onChange={(value) => console.log('onChange', value)}
/>

Radio button - Value false#

Label text
<Field.Boolean
  variant="radio-button"
  label="Label text"
  value={false}
  onChange={(value) => console.log('onChange', value)}
/>

Radio button - Value undefined (no option selected)#

Label text
<Field.Boolean
  variant="radio-button"
  label="Label text"
  onChange={(value) => console.log('onChange', value)}
/>

Radio button - Required#

Set to be required initially
<Field.Boolean
  variant="radio-button"
  label="Set to be required initially"
  onChange={(value) => console.log('onChange', value)}
  validateInitially
  required
/>

Radio button - Disabled#

I am disabled
<Field.Boolean
  variant="radio-button"
  label="I am disabled"
  onChange={(value) => console.log('onChange', value)}
  disabled
/>

Radio button - Error#

Label text
This is what is wrong...
<Field.Boolean
  variant="radio-button"
  label="Label text"
  onChange={(value) => console.log('onChange', value)}
  error={new Error('This is what is wrong...')}
/>

Buttons#

Value true#

Label text
<Field.Boolean
  variant="buttons"
  label="Label text"
  value={true}
  onChange={(value) => console.log('onChange', value)}
/>

Buttons - Value false#

Label text
<Field.Boolean
  variant="buttons"
  label="Label text"
  value={false}
  onChange={(value) => console.log('onChange', value)}
/>

Buttons - Value undefined (no option selected)#

Label text
<Field.Boolean
  variant="buttons"
  label="Label text"
  onChange={(value) => console.log('onChange', value)}
/>

Buttons - Required#

Set to be required initially
<Field.Boolean
  variant="buttons"
  label="Set to be required initially"
  onChange={(value) => console.log('onChange', value)}
  validateInitially
  required
/>

Buttons - With Help#

Buttons variant
<Field.Boolean
  variant="buttons"
  label="Buttons variant"
  help={{
    title: 'Help title',
    content: 'Help content',
  }}
/>

Buttons - Disabled#

I am disabled
<Field.Boolean
  variant="buttons"
  label="I am disabled"
  onChange={(value) => console.log('onChange', value)}
  disabled
/>

Buttons - Error#

Label text
This is what is wrong...
<Field.Boolean
  variant="buttons"
  label="Label text"
  onChange={(value) => console.log('onChange', value)}
  error={new Error('This is what is wrong...')}
/>

Radio#

Value true#

Label text
<Field.Boolean
  variant="radio"
  label="Label text"
  value={true}
  onChange={(value) => console.log('onChange', value)}
/>

Radio - Value false#

Label text
<Field.Boolean
  variant="radio"
  label="Label text"
  value={false}
  onChange={(value) => console.log('onChange', value)}
/>

Radio - Value undefined (no option selected)#

Label text
<Field.Boolean
  variant="radio"
  label="Label text"
  onChange={(value) => console.log('onChange', value)}
/>

Radio - Required#

Set to be required initially
<Field.Boolean
  variant="radio"
  label="Set to be required initially"
  onChange={(value) => console.log('onChange', value)}
  validateInitially
  required
/>

Radio - With Help#

Radio variant
<Field.Boolean
  variant="radio"
  label="Radio variant"
  help={{
    title: 'Help title',
    content: 'Help content',
  }}
/>

Radio - Disabled#

I am disabled
<Field.Boolean
  variant="radio"
  label="I am disabled"
  onChange={(value) => console.log('onChange', value)}
  disabled
/>

Radio - Error#

Label text
This is what is wrong...
<Field.Boolean
  variant="radio"
  label="Label text"
  onChange={(value) => console.log('onChange', value)}
  error={new Error('This is what is wrong...')}
/>

Switch#

Switch - With Help#

<Field.Boolean
  variant="switch"
  label="Switch variant"
  help={{
    title: 'Help title',
    content: 'Help content',
  }}
/>
Suggest an edit