Inputs

Checkbox

A binary form control for opting into one or more independent choices.

CheckboxView source

Example

The preview is interactive. The code below it is the docs demo source; demo-only layout classes can be omitted in application code.

Max bandwidth

tsx

import { Cell } from "retend";

import { Checkbox } from "innate-ui";
import { Icon } from "@/docs/icons/Icon";

export function CheckboxDemo() {
  const enabled = Cell.source(true);

  return (
    <Checkbox value={enabled} onChange={(value) => enabled.set(value)}>
      <Checkbox.CheckIcon>
        <Icon name="check" data-slot-icon="checkbox-check" />
      </Checkbox.CheckIcon>
      Max bandwidth
    </Checkbox>
  );
}

API reference

This table is generated from Innate UI's exported TypeScript declarations and JSDoc. Native element attributes inherited by a prop type are not repeated here.

CheckboxProps

Prop	Type	Default
`value`required Checked state.	`JSX.ValueOrCell<boolean>`	`—`
`onChange` Called with the next checked state.	`(value: boolean) => void`	`—`
`children`required Checkbox label content.	`JSX.Children`	`—`
`disabled` Whether the checkbox is disabled.	`JSX.ValueOrCell<boolean>`	`false`
`invalid` Whether the checkbox is in an invalid state. Inherits from `Field`.	`JSX.ValueOrCell<boolean>`	`false`
`ariaDescribedBy` Ids of elements that describe the checkbox.	`JSX.ValueOrCell<string \| undefined>`	`—`

Inspect the typed source →