Checkbox

Toggle control for boolean selection

Installation

pnpm add @corew500/ui

Usage

import { Checkbox } from "@corew500/ui/checkbox"

<Checkbox>Content</Checkbox>

Variants

checkboxVariants

Axis	Values	Default
`size`	smdefaultlg	default

checkboxIndicatorVariants

Axis	Values	Default
`size`	smdefaultlg	default

CMS Integration

CMSPayload CMS Integration

This component supports CMS-driven content via @corew500/cms-payload.

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.

API Reference

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.

Accessibility

Keyboard Navigation

Supports keyboard activation (Space to toggle)
Focus ring visible for keyboard navigation

Screen Readers

Checked state announced by screen readers
Use `aria-labelledby` pointing to the label's `id`, or `aria-label` when no visible label exists

Additional

- Uses native checkbox semantics via Base UI primitive
Note: `htmlFor`/`id` does not work with Base UI Checkbox (id goes to hidden input, not the visible element)