# @askrjs/themes/checkbox

> Published API exports for @askrjs/themes/checkbox.

Source: [https://askrjs.com/docs/reference/api/themes/checkbox](https://askrjs.com/docs/reference/api/themes/checkbox)

Status: stable. Packages: @askrjs/themes/checkbox.

**Published packages are authoritative.** Examples may lag behind a published contract. When guidance differs, verify the exports and TypeScript declarations in your installed package, then file an issue.

## Exports

This entrypoint publishes 5 exports from the declarations shipped by @askrjs/themes.

### `Checkbox`

```ts
Checkbox: { (props: CheckboxInputProps): JSX.Element; (props: CheckboxAsChildProps): JSX.Element; }
```

Headless Checkbox component

## Responsibilities
- Apply aria-checked for checkbox state signaling
- Handle indeterminate state for native and asChild hosts
- Support controlled and uncontrolled checked state
- Forward props and refs to native input or child element
- Preserve native checkbox semantics and apply checkbox behavior to asChild hosts

## Non-Responsibilities
- Form submission orchestration beyond native input props

## Invariants
- MUST NOT add role="button" (native inputs are role="checkbox")
- checked state may be controlled or uncontrolled
- indeterminate overrides checked for state signaling
- For asChild, consumer MUST provide role="checkbox"
Renders the `checkbox` part of `checkbox` with `role="checkbox"`.

Supports polymorphic rendering via `asChild`.

````tsx
Native checkbox input
```tsx
const checked = state(false);
<Checkbox checked={checked()} onPress={() => checked.set(!checked())} />
```
````

````tsx
Polymorphic rendering (asChild)
```tsx
<Checkbox asChild checked={agreed} onPress={toggleAgree}>
<div role="checkbox">I agree to terms</div>
</Checkbox>
```
````

````tsx
Indeterminate state (partial selection)
```tsx
<Checkbox checked={someChecked} indeterminate={!allChecked && someChecked} onPress={toggleAll}>
Select All
</Checkbox>
```
````

### `CheckboxAsChildProps`

```ts
CheckboxAsChildProps: CheckboxOwnProps & {
  asChild: true;
  children: JSXElement;
  ref?: Ref<Element>;
}
```

Props when rendering via asChild

- `asChild`: asChild: true;

- `checked`: checked?: boolean | undefined;

- `children`: children: JSXElement;

- `defaultChecked`: defaultChecked?: boolean | undefined;

- `disabled`: disabled?: boolean | undefined;

- `indeterminate`: indeterminate?: boolean | undefined;

- `name`: name?: string | undefined;

- `onCheckedChange`: onCheckedChange?: ((checked: boolean) => void) | undefined;

- `onPress`: onPress?: ((e: PressEvent) => void) | undefined;

- `ref`: ref?: Ref<Element>;

- `required`: required?: boolean | undefined;

- `value`: value?: string | undefined;

### `CheckboxInputProps`

```ts
CheckboxInputProps: Omit<JSX.IntrinsicElements['input'], 'children' | 'onClick' | 'disabled' | 'type' | 'ref' | 'checked' | 'name' | 'value' | 'required'> & CheckboxOwnProps & {
  asChild?: false;
  ref?: Ref<HTMLInputElement>;
}
```

Props when rendering as a native <input type="checkbox"> element

- `asChild`: asChild?: false | undefined;

- `checked`: checked?: boolean | undefined;

- `children`: children?: unknown;

- `defaultChecked`: defaultChecked?: boolean | undefined;

- `disabled`: disabled?: boolean | undefined;

- `name`: name?: string | undefined;

- `onCheckedChange`: onCheckedChange?: ((checked: boolean) => void) | undefined;

- `onPress`: onPress?: ((e: PressEvent) => void) | undefined;

- `ref`: ref?: Ref<HTMLInputElement>;

- `required`: required?: boolean | undefined;

- `value`: value?: string | undefined;

### `CheckboxOwnProps`

```ts
CheckboxOwnProps: {
  children?: unknown;
  onPress?: (e: PressEvent) => void;
  checked?: boolean;
  defaultChecked?: boolean;
  onCheckedChange?: (checked: boolean) => void;
  indeterminate?: boolean;
  disabled?: boolean;
  required?: boolean;
  name?: string;
  value?: string;
}
```

Props shared by all Checkbox variants

- `checked`: checked?: boolean | undefined;

- `children`: children?: unknown;

- `defaultChecked`: defaultChecked?: boolean | undefined;

- `disabled`: disabled?: boolean | undefined;

- `indeterminate`: indeterminate?: boolean | undefined;

- `name`: name?: string | undefined;

- `onCheckedChange`: onCheckedChange?: ((checked: boolean) => void) | undefined;

- `onPress`: onPress?: ((e: PressEvent) => void) | undefined;

- `required`: required?: boolean | undefined;

- `value`: value?: string | undefined;

### `CheckboxProps`

```ts
CheckboxProps: CheckboxInputProps | CheckboxAsChildProps
```

Discriminated union of Checkbox prop types

- `asChild`: asChild?: boolean | undefined;

- `checked`: checked?: boolean | undefined;

- `children`: children?: unknown;

- `defaultChecked`: defaultChecked?: boolean | undefined;

- `disabled`: disabled?: boolean | undefined;

- `name`: name?: string | undefined;

- `onCheckedChange`: onCheckedChange?: ((checked: boolean) => void) | undefined;

- `onPress`: onPress?: ((e: PressEvent) => void) | undefined;

- `ref`: ref?: ((value: Element | null) => void) | { current: Element | null; } | ((value: HTMLInputElement | null) => void) | { current: HTMLInputElement | null; } | null | undefined;

- `required`: required?: boolean | undefined;

- `value`: value?: string | undefined;

## Documentation navigation

[Previous](https://askrjs.com/docs/reference/api/themes/center/index.md) | [Next](https://askrjs.com/docs/reference/api/themes/cluster/index.md)