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