@askrjs/themes/checkbox

Checkboxtype

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.

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

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

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

CheckboxAsChildPropstype

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;

CheckboxInputPropstype

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;

CheckboxOwnPropstype

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;

CheckboxPropstype

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;