Skip to content
Home

Field.Boolean#

Info
Demos
Properties
Events

Import#

import { Field } from '@dnb/eufemia/extensions/forms'
render(<Field.Boolean />)

Description#

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

Before using this component, ensure there is not a more specific field component available that better suits your needs.

There is a corresponding Value.Boolean component.

import { Field } from '@dnb/eufemia/extensions/forms'
render(<Field.Boolean path="/myState" />)

Relevant links#

Indeterminate checkbox#

Here is an indeterminate state (partially checked) working example.

Schema validation#

You can use a schema to validate the value with either const or enum.

Using Zod schemas

import { Form, Field, z } from '@dnb/eufemia/extensions/forms'


const schema = z.object({
  myField: z.literal(true), // or z.enum([true])
})


render(
  <Form.Handler schema={schema} data={{ myField: false }}>
    <Field.Boolean path="/myField" />
  </Form.Handler>
)

Using JSON Schema (Ajv)

import {
  Form,
  Field,
  makeAjvInstance,
} from '@dnb/eufemia/extensions/forms'


const ajv = makeAjvInstance()
const schema = {
  type: 'object',
  properties: {
    myField: {
      type: 'boolean',
      const: true, // or enum: [true]
    },
  },
}


render(
  <Form.Handler
    schema={schema}
    ajvInstance={ajv}
    data={{ myField: false }}
  >
    <Field.Boolean path="/myField" />
  </Form.Handler>
)

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