Checkbox

A checkbox component for form inputs, ready for CMS integration.

CMSPayload CMS Integration

Checkboxes can be configured through CMS fields, allowing content editors to customize labels, descriptions, and validation requirements without code changes.

CMS Demo

See how content editors configure checkboxes in a CMS:

Accept terms and conditions *

You agree to our Terms of Service and Privacy Policy.

CMS FieldsEN

Label

Description

Required

Disabled

This simulates how a content editor configures checkboxes in Payload CMS. Switch locales to see localized content.

CMS ConfigurationSimulates Payload CMS checkbox fields with localization

Payload Form Example

// In your Payload CMS form config
export const ConsentFields = {
  slug: "consent-fields",
  fields: [
    {
      name: "termsCheckbox",
      type: "group",
      fields: [
        { name: "label", type: "text", localized: true, required: true },
        { name: "description", type: "textarea", localized: true },
        { name: "required", type: "checkbox", defaultValue: true },
      ],
    },
  ],
}

Rendering the Form

import { Checkbox } from "@mordecai-design-system/ui"

export function ConsentForm({ data }) {
  return (
    <div className="flex items-start gap-3">
      <Checkbox
        id="terms"
        required={data.termsCheckbox.required}
      />
      <div>
        <label htmlFor="terms" className="text-sm font-medium">
          {data.termsCheckbox.label}
        </label>
        <p className="text-xs text-muted-foreground">
          {data.termsCheckbox.description}
        </p>
      </div>
    </div>
  )
}

Installation

pnpm add @corew500/ui

Usage

import { Checkbox } from "@mordecai-design-system/ui"

<Checkbox id="terms" />

Examples

With Label

<div className="flex items-center gap-2">
  <Checkbox id="terms" />
  <label
    htmlFor="terms"
    className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
  >
    Accept terms and conditions
  </label>
</div>

With Description

<div className="flex items-start gap-3">
  <Checkbox id="marketing" />
  <div className="space-y-1">
    <label htmlFor="marketing" className="text-sm font-medium">
      Marketing emails
    </label>
    <p className="text-xs text-muted-foreground">
      Receive emails about new products, features, and more.
    </p>
  </div>
</div>

Disabled

<div className="flex items-center gap-2">
  <Checkbox id="disabled" disabled />
  <label htmlFor="disabled" className="text-sm text-muted-foreground">
    Disabled checkbox
  </label>
</div>

Props

Prop	Type	Default	Description
`size`	enum	`"default"`	Size variant for the checkbox.
`className`	enum	—	CSS class applied to the element, or a function that returns a class based on the component’s state.
`defaultChecked`	enum	`false`	Whether the checkbox is initially ticked. To render a controlled checkbox, use the `checked` prop instead.
`style`	enum	—	Style applied to the element, or a function that returns a style object based on the component’s state.
`id`	string	—	The id of the input element.
`value`	string	—	The value of the selected checkbox.
`render`	enum	—	Allows you to replace the component’s HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.
`name`	string	`undefined`	Identifies the field when a form is submitted.
`checked`	enum	`undefined`	Whether the checkbox is currently ticked. To render an uncontrolled checkbox, use the `defaultChecked` prop instead.
`disabled`	enum	`false`	Whether the component should ignore user interaction.
`onCheckedChange`	(checked: boolean, eventDetails: { reason: "none"; event: Event; cancel: () => void; allowPropagation: () => void; isCanceled: boolean; isPropagationAllowed: boolean; trigger: Element; }) => void	—	Event handler called when the checkbox is ticked or unticked.
`readOnly`	enum	`false`	Whether the user should be unable to tick or untick the checkbox.
`required`	enum	`false`	Whether the user must tick the checkbox before submitting a form.
`indeterminate`	enum	`false`	Whether the checkbox is in a mixed state: neither ticked, nor unticked.
`inputRef`	enum	—	A ref to access the hidden `<input>` element.
`parent`	enum	`false`	Whether the checkbox controls a group of child checkboxes. Must be used in a [Checkbox Group](https://base-ui.com/react/components/checkbox-group).
`uncheckedValue`	string	—	The value submitted with the form when the checkbox is unchecked. By default, unchecked checkboxes do not submit any value, matching native checkbox behavior.
`nativeButton`	enum	`false`	Whether the component renders a native `<button>` element when replacing it via the `render` prop. Set to `true` if the rendered element is a native button.