Skip to content
Home

Boolean

Info
Demos
Properties
Events

Description

Field.Boolean is the base component for receiving user input where the target data is of type boolean.

There is a corresponding Value.Boolean component.

Demos

No label or value

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

Checkbox

Value: true

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

Value false

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

Checkbox - Required

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

Checkbox - Disabled

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

Checkbox - Error

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

Button

Value true

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

Button - Value false

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

Button - Required

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

Button - Disabled

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

Button - Error

This is what is wrong...
Code Editor
<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

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

Checkbox button - Value false

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

Checkbox button - Required

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

Checkbox button - Disabled

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

Checkbox button - Error

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

Buttons

Value true

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

Buttons - Value false

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

Buttons - Required

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

Buttons - Disabled

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

Buttons - Error

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