revido kit
Start building
← All components
forms / stable

Checkbox

16px box with a 4px radius; cobalt fill with a check, a dash when indeterminate. CheckboxGroup collects values.

LIVE PREVIEW
Loading preview…

When to use

  • Independent yes/no answers in a form that is submitted later.
  • Selecting rows in a list or table (with indeterminate for “select all”).
  • “Pick any” lists — wrap them in CheckboxGroup.

Consider an alternative

  • Settings that apply immediately — use Switch.
  • Choosing exactly one option — use RadioGroup or Select.

Import

import { Checkbox } from '@revido-llc/kit';

Keyboard interaction

  • Space — toggle
  • Tab — move focus

Props

Props documented by the Kit. Refer to the TypeScript types for the complete interface, including inherited props.

checkedCheckedState—Radix compatibility: `true`, `false` or `"indeterminate"` (controlled). Prefer `isSelected`/`isIndeterminate`.
childrenReactNode—Visible label rendered to the right of the box.
classNamestring—Classes for the root. Without `children` the root *is* the box, so box classes go here.
defaultCheckedboolean—Radix compatibility: prefer `defaultSelected`.
defaultSelectedboolean—Whether the box is checked initially (uncontrolled).
descriptionReactNode—Help text under the label (only with `children`).
disabledboolean—Radix compatibility: prefer `isDisabled`.
isSelectedboolean—Whether the box is checked (controlled).
onChange((isSelected: boolean) => void)—Called with the new checked state.
onCheckedChange((checked: boolean) => void)—Radix compatibility: prefer `onChange`. Receives a boolean (never `"indeterminate"`).
requiredboolean—Radix compatibility: prefer `isRequired`.
autoFocusboolean—Whether the element should receive focus on render.
formstring—The `<form>` element to associate the input with. The value of this attribute must be the id of a `<form>` in the same document. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#form).
inputRefRef<HTMLInputElement>—A ref for the HTML input element.
isDisabledboolean—Whether the input is disabled.
isIndeterminateboolean—Indeterminism is presentational only. The indeterminate visual representation remains regardless of user interaction.
isInvalidboolean—Whether the input value is invalid.
isReadOnlyboolean—Whether the input can be selected but not changed by the user.
isRequiredboolean—Whether user input is required on the input before form submission.
namestring—The name of the input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname).
onPress((e: PressEvent) => void)—Handler that is called when the press is released over the target.
renderDOMRenderFunction<"div", CheckboxFieldRenderProps>—Overrides the default DOM element with a custom render function. This allows rendering existing components with built-in styles and behaviors such as router links, animation libraries, and pre-styled components. Requirements: - You must render the expected element type (e.g. if `<button>` is expected, you cannot render an `<a>`). - Only a single root DOM element can be rendered (no fragments). - You must pass through props and ref to the underlying DOM element, merging with your own prop as appropriate.
validate((value: boolean) => ValidationError | true)—A function that returns an error message if a given value is invalid. Validation errors are displayed to the user when the form is submitted if `validationBehavior="native"`. For realtime validation, use the `isInvalid` prop instead.
validationBehavior"native" | "aria"'native'Whether to use native HTML form validation to prevent form submission when the value is missing or invalid, or mark the field as required or invalid via ARIA.

Related exports

CheckboxGroup, CheckboxIndicator, checkboxBoxClassName

Examples

States

<Checkbox>Unchecked</Checkbox>
<Checkbox defaultSelected>Checked</Checkbox>
<Checkbox isIndeterminate>Indeterminate</Checkbox>
<Checkbox isDisabled>Disabled</Checkbox>

With description

<Checkbox description="The client sees this item on the proposal.">Visible to client</Checkbox>

Group

One labelled set; `value` is the array of checked values.

<CheckboxGroup label="Notify me by" value={channels} onChange={setChannels}>
  <Checkbox value="email">Email</Checkbox>
  <Checkbox value="slack">Slack</Checkbox>
</CheckboxGroup>

Select all rows

Indeterminate when some, not all, rows are selected.

<Checkbox isSelected={all} isIndeterminate={some && !all} onChange={selectAll}>All tasks</Checkbox>

Literal anatomy

Static component anatomy; bind events in the consuming app.

<CheckboxGroup label="Notifications" defaultValue={["updates"]}><Checkbox value="updates">Updates</Checkbox><Checkbox value="comments">Comments</Checkbox></CheckboxGroup>

Static anatomy

A literal starting point; bind selection and validation in the consuming app.

<CheckboxIndicator isSelected isIndeterminate={false} />

Related components