Skip to content
Home

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.

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 a 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

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 - prevent changing the state of the checkbox

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

Code Editor
<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...
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

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

Buttons - Value false

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

Button - Value undefined (no option selected)

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

Buttons - Required

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

Buttons - With Help

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

Buttons - Disabled

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

Buttons - Error

Label text
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...')}
/>

Radio

Value true

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

Radio - Value false

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

Radio - Value undefined (no option selected)

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

Radio - Required

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

Radio - With Help

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

Radio - Disabled

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

Radio - Error

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