Checkbox

A toggleable input for boolean choices, supporting checked, unchecked, and indeterminate states.

Import

tsx

import { Checkbox } from '@tac-ui/native';

Playground

Interactively configure the Checkbox props below.

Accept terms and conditions

Label

Disabled

tsx

<Checkbox label="Accept terms and conditions" />

Default

Uncontrolled checkbox using defaultChecked. The component manages its own state internally.

Accept terms and conditions

Pre-checked

tsx

<Checkbox label="Accept terms and conditions" />
<Checkbox label="Pre-checked" defaultChecked />

Indeterminate

The indeterminate state represents a partially-selected state, useful for parent checkboxes in a hierarchical selection.

Select all (partial)

tsx

<Checkbox label="Select all (partial)" indeterminate />

Disabled

Disabled checkboxes are non-interactive and visually dimmed, preserving their current state.

Disabled unchecked

Disabled checked

tsx

<Checkbox label="Disabled unchecked" disabled />
<Checkbox label="Disabled checked" disabled defaultChecked />

Controlled

Pass checked and onChange to control the checkbox state from a parent component.

tsx

import { useState } from 'react';

function ControlledExample() {
  const [checked, setChecked] = useState(false);

  return (
    <Checkbox
      label={checked ? 'Checked' : 'Unchecked'}
      checked={checked}
      onChange={setChecked}
    />
  );
}

All States

Overview of all four visual states: default, checked, indeterminate, and disabled.

Default

Checked

Indeterminate

Disabled

tsx

<Checkbox label="Default" />
<Checkbox label="Checked" defaultChecked />
<Checkbox label="Indeterminate" indeterminate />
<Checkbox label="Disabled" disabled />

API Reference

Prop	Type	Default	Description
label	string	-	Label text displayed next to the checkbox.
checked	boolean	-	Controlled checked state. Use with onChange for a controlled input.
defaultChecked	boolean	false	Initial checked state for uncontrolled usage.
indeterminate	boolean	false	Renders a dash icon representing a partially-selected state.
filled	boolean	false	Adds a tinted background to the checkbox label area.
disabled	boolean	false	Disables the checkbox, making it non-interactive and visually dimmed.
onChange	(checked: boolean) => void	-	Callback fired when the checked state changes.
style	ViewStyle	-	Additional React Native style applied to the wrapper container.