Checkbox Field - Payload

The Checkbox Field saves a boolean in the database.

To add a Checkbox Field, set the type to checkbox in your Field Config:

import type { Field } from 'payload'

export const MyCheckboxField: Field = {
  // ...
  type: 'checkbox', // highlight-line
}

Config Options

Option	Description
`name` *	To be used as the property name when stored and retrieved from the database. More details.
`label`	Text used as a field label in the Admin Panel or an object with keys for each language.
`validate`	Provide a custom validation function that will be executed on both the Admin Panel and the backend. More details.
`index`	Build an index for this field to produce faster queries. Set this field to `true` if your users will perform queries on this field's data often.
`saveToJWT`	If this field is top-level and nested in a config supporting Authentication, include its data in the user JWT.
`hooks`	Provide Field Hooks to control logic for this field. More details.
`access`	Provide Field Access Control to denote what users can see and do with this field's data. More details.
`hidden`	Restrict this field's visibility from all APIs entirely. Will still be saved to the database, but will not appear in any API or the Admin Panel.
`defaultValue`	Provide data to be used for this field's default value, will default to false if field is also `required`. More details.
`localized`	Enable localization for this field. Requires localization to be enabled in the Base config.
`required`	Require this field to have a value.
`admin`	Admin-specific configuration. More details.
`custom`	Extension point for adding custom data (e.g. for plugins)
`typescriptSchema`	Override field type generation with providing a JSON schema
`virtual`	Provide `true` to disable field in the database, or provide a string path to link the field with a relationship. See Virtual Fields

* An asterisk denotes that a property is required.

Example

Here is an example of a Checkbox Field in a Collection:

import type { CollectionConfig } from 'payload'

export const ExampleCollection: CollectionConfig = {
  slug: 'example-collection',
  fields: [
    {
      name: 'enableCoolStuff', // required
      type: 'checkbox', // required
      label: 'Click me to see fanciness',
      defaultValue: false,
    },
  ],
}

Custom Components

Field

Server Component

tsx

import type React from 'react'
import { CheckboxField } from '@payloadcms/ui'
import type { CheckboxFieldServerComponent } from 'payload'

export const CustomCheckboxFieldServer: CheckboxFieldServerComponent = ({
  clientField,
  path,
  schemaPath,
  permissions,
}) => {
  return (
    <CheckboxField
      field={clientField}
      path={path}
      schemaPath={schemaPath}
      permissions={permissions}
    />
  )
}

Client Component

tsx

'use client'
import React from 'react'
import { CheckboxField } from '@payloadcms/ui'
import type { CheckboxFieldClientComponent } from 'payload'

export const CustomCheckboxFieldClient: CheckboxFieldClientComponent = (
  props,
) => {
  return <CheckboxField {...props} />
}

Label

Server Component

tsx

import React from 'react'
import { FieldLabel } from '@payloadcms/ui'
import type { CheckboxFieldLabelServerComponent } from 'payload'

export const CustomCheckboxFieldLabelServer: CheckboxFieldLabelServerComponent =
  ({ clientField, path }) => {
    return (
      <FieldLabel
        label={clientField?.label || clientField?.name}
        path={path}
        required={clientField?.required}
      />
    )
  }

Client Component

tsx

'use client'
import React from 'react'
import { FieldLabel } from '@payloadcms/ui'
import type { CheckboxFieldLabelClientComponent } from 'payload'

export const CustomCheckboxFieldLabelClient: CheckboxFieldLabelClientComponent =
  ({ label, path, required }) => {
    return (
      <FieldLabel
        label={field?.label || field?.name}
        path={path}
        required={field?.required}
      />
    )
  }