Checkbox

A control that allows the user to toggle between checked and not checked states. Supports full keyboard navigation.

Import

import { Checkbox } from "@sparrowengg/twigs-react";

Usage

const CheckboxExample = () => {
  return (
    <Checkbox id="accept-terms" size="md">
        Accept terms and conditions
    </Checkbox>
  );
};

The checkbox supports an indeterminate state, useful for representing partial selections (e.g., "select all" scenarios). When set to 'indeterminate', the checkbox displays a horizontal line icon instead of a checkmark.

Props

Prop	Type	Default
`checked?`	`boolean \| 'indeterminate'`	-
`onChange?`	`(checked: boolean \| 'indeterminate') => void`	-
`children?`	`ReactNode`	-
`disabled?`	`boolean`	`false`
`required?`	`boolean`	`false`
`id?`	`string`	-
`name?`	`string`	-
`value?`	`string`	`on`
`size?`	`'sm' \| 'md'`	`'sm'`
`containerRef?`	`React.Ref<HTMLDivElement>`	-
`css?`	`object`	-

Data Attributes

These props are used for the conditional rendering of the components

Prop	Type	Default
`[data-state]?`	`'checked' \| 'unchecked' \| 'indeterminate'`	-
`[data-disabled]?`	`boolean`	-

Checkbox

Import

Usage

Examples

Indeterminate State

Props

Checkbox

Data Attributes

On this page