> ## Documentation Index
> Fetch the complete documentation index at: https://docs.twenty.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Checkbox

> Select independent options with checked and indeterminate states.

Use `Checkbox` when each option can be selected independently. For a mutually exclusive choice, use [RadioGroup](/ui/components/input/radio-group).

## Uncontrolled state

```tsx theme={null}
import { Checkbox } from 'twenty-ui/input';

export const EmailPreference = () => (
  <label>
    <Checkbox name="updates" value="email" defaultChecked />
    Receive product updates
  </label>
);
```

A checked, named checkbox contributes its value to a form. Set `uncheckedValue` if the form should also submit a value when it is unchecked.

## Controlled and indeterminate states

```tsx theme={null}
import { useState } from 'react';
import { Checkbox } from 'twenty-ui/input';

export const ColumnSelection = () => {
  const [showEmail, setShowEmail] = useState(true);
  const [showPhone, setShowPhone] = useState(false);

  return (
    <fieldset>
      <legend>Visible columns</legend>
      <label>
        <Checkbox
          checked={showEmail && showPhone}
          indeterminate={showEmail !== showPhone}
          onCheckedChange={(checked) => {
            setShowEmail(checked);
            setShowPhone(checked);
          }}
        />
        All columns
      </label>
      <label>
        <Checkbox checked={showEmail} onCheckedChange={setShowEmail} />
        Email
      </label>
      <label>
        <Checkbox checked={showPhone} onCheckedChange={setShowPhone} />
        Phone
      </label>
    </fieldset>
  );
};
```

The indeterminate state represents a partial selection; the application derives it from the child options. `onCheckedChange` receives the next boolean and event details.

## Appearance and interaction

| Prop      | Values                         | Default  |
| --------- | ------------------------------ | -------- |
| `size`    | `sm`, `md`                     | `sm`     |
| `variant` | `solid`, `outline`, `soft`     | `solid`  |
| `shape`   | `square`, `round`              | `square` |
| `color`   | `accent`, `success`, `warning` | `accent` |

Tab focuses the checkbox and Space toggles it. Clicking its label also toggles it. Use `disabled` to prevent interaction, or `readOnly` when the value should remain unchanged while the control stays focusable. Keep meaning in the label rather than communicating it through color alone.

## Props

The reference is generated from the public component types. Native attributes, including accessible names and event handlers, are also accepted on parts that render elements.

<ParamField body="checked" type="boolean">
  Whether the checkbox is currently ticked.

  To render an uncontrolled checkbox, use the `defaultChecked` prop instead.
</ParamField>

<ParamField body="className" type="string | ((state: CheckboxRootState) => string | undefined)">
  CSS class applied to the element, or a function that
  returns a class based on the component's state.
</ParamField>

<ParamField body="color" type="&#x22;accent&#x22; | &#x22;success&#x22; | &#x22;warning&#x22;" default="accent">
  Color used while the checkbox is checked or indeterminate.
</ParamField>

<ParamField body="defaultChecked" type="boolean" default="false">
  Whether the checkbox is initially ticked.

  To render a controlled checkbox, use the `checked` prop instead.
</ParamField>

<ParamField body="disabled" type="boolean" default="false">
  Whether the component should ignore user interaction.
</ParamField>

<ParamField body="form" type="string">
  Identifies the form that owns the hidden input.
  Useful when the checkbox is rendered outside the form.
</ParamField>

<ParamField body="hoverable" type="boolean" default="true">
  Adds padding around the box and a hover background. Disable it for a
  compact checkbox inside another interactive element.
</ParamField>

<ParamField body="id" type="string">
  The id of the input element.
</ParamField>

<ParamField body="indeterminate" type="boolean" default="false">
  Whether the checkbox is in a mixed state: neither ticked, nor unticked.
</ParamField>

<ParamField body="inputRef" type="Ref<HTMLInputElement>">
  A ref to access the hidden `<input>` element.
</ParamField>

<ParamField body="name" type="string">
  Identifies the field when a form is submitted.
</ParamField>

<ParamField body="nativeButton" type="boolean" default="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.
</ParamField>

<ParamField body="onCheckedChange" type="((checked: boolean, eventDetails: { reason: &#x22;none&#x22;; event: Event; cancel: () => void; allowPropagation: () => void; isCanceled: boolean; isPropagationAllowed: boolean; trigger: Element | undefined; }) => void)">
  Event handler called when the checkbox is ticked or unticked.
</ParamField>

<ParamField body="parent" type="boolean" default="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).
</ParamField>

<ParamField body="readOnly" type="boolean" default="false">
  Whether the user should be unable to tick or untick the checkbox.
</ParamField>

<ParamField body="render" type="ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, CheckboxRootState>">
  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.
</ParamField>

<ParamField body="required" type="boolean" default="false">
  Whether the user must tick the checkbox before submitting a form.
</ParamField>

<ParamField body="shape" type="&#x22;square&#x22; | &#x22;round&#x22;" default="square">
  Corner shape of the box.
</ParamField>

<ParamField body="size" type="&#x22;sm&#x22; | &#x22;md&#x22;" default="sm">
  Visual size of the checkbox.
</ParamField>

<ParamField body="style" type="CSSProperties | ((state: CheckboxRootState) => CSSProperties | undefined)">
  Style applied to the element, or a function that
  returns a style object based on the component's state.
</ParamField>

<ParamField body="uncheckedValue" type="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.
</ParamField>

<ParamField body="value" type="string">
  The checkbox's value. Identifies it within a [Checkbox Group](https://base-ui.com/react/components/checkbox-group), falling back to `name` when omitted.
  When submitting a form, a checked box submits `value`; with no `value`, it submits the native "on".
</ParamField>

<ParamField body="variant" type="&#x22;solid&#x22; | &#x22;outline&#x22; | &#x22;soft&#x22;" default="solid">
  Visual style of the box: filled, outlined, or tinted.
</ParamField>