upstream-twenty/packages/twenty-docs/snippets/ui/generated/input/checkbox.mdx

{/*
 * _____                    _
 *|_   _|_      _____ _ __ | |_ _   _
 *  | | \ \ /\ / / _ \ '_ \| __| | | | Auto-generated file
 *  | |  \ V  V /  __/ | | | |_| |_| | DO NOT EDIT - changes will be overwritten
 *  |_|   \_/\_/ \___|_| |_|\__|\__, | Generated by: npx nx generate:ui twenty-docs
 *                              |___/
 *
 * This file is generated from the documentation data in packages/twenty-ui/generated.
 * To update it, edit the component prop types or design tokens in twenty-ui and run:
 *   npx nx generate:ui twenty-docs
 */}

<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) =&gt; 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="&quot;accent&quot; | &quot;success&quot; | &quot;warning&quot;" 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&lt;HTMLInputElement&gt;">
  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: &quot;none&quot;; event: Event; cancel: () =&gt; void; allowPropagation: () =&gt; void; isCanceled: boolean; isPropagationAllowed: boolean; trigger: Element | undefined; }) =&gt; 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&lt;unknown, string | JSXElementConstructor&lt;any&gt;&gt; | ComponentRenderFn&lt;HTMLProps, CheckboxRootState&gt;">
  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="&quot;square&quot; | &quot;round&quot;" default="square">
  Corner shape of the box.
</ParamField>

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

<ParamField body="style" type="CSSProperties | ((state: CheckboxRootState) =&gt; 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="&quot;solid&quot; | &quot;outline&quot; | &quot;soft&quot;" default="solid">
  Visual style of the box: filled, outlined, or tinted.
</ParamField>