Skip to main content

Checkbox

Inputs & Controls

Checkbox

Cross-platform checkbox with Material states for Android and iOS variants.

Usage

Collect true/false responses or build multi-select lists.

Highlights

  • Composable Checkbox.Row / Checkbox.Label slots
  • Label-to-control linking (web aria-labelledby), supports indeterminate state

When to use it

  • Users can toggle multiple options in filters.
  • You must represent tri-state data (checked, unchecked, mixed).

Related components

RadioSwitch

Anatomy​

Checkbox is a composable compound component:

  • CheckboxRow owns the checked state (value / onChange, or uncontrolled defaultValue) and binds it to a Checkbox + Checkbox.Label. The row itself is not pressable — only the control and the label are. The label is linked to the control for accessibility (web aria-labelledby).
  • Checkbox is the control (the box). Used inside a CheckboxRow, or standalone with its own value / onChange.
  • Checkbox.Label is the row's label. Pressing it toggles the checkbox.

Examples​

Bare checkbox​

Preview (Web)
import { Checkbox } from 'react-native-molecules/components/Checkbox';
import { useState } from 'react';

export default function Example() {
  const [value, setValue] = useState(true);

  return <Checkbox value={value} onChange={setValue} />;
}

Labeled checkbox​

Preview (Web)
import { Checkbox, CheckboxRow } from 'react-native-molecules/components/Checkbox';
import { useState } from 'react';

export default function Example() {
  const [value, setValue] = useState(false);

  return (
      <CheckboxRow value={value} onChange={setValue}>
          <Checkbox />
          <Checkbox.Label>Accept terms and conditions</Checkbox.Label>
      </CheckboxRow>
  );
}

Label-first ordering​

Composition controls the layout — put Checkbox.Label before Checkbox to render the control on the trailing edge.

Preview (Web)
import { Checkbox, CheckboxRow } from 'react-native-molecules/components/Checkbox';

export default function Example() {
  return (
      <CheckboxRow defaultValue>
          <Checkbox.Label>Subscribe to newsletter</Checkbox.Label>
          <Checkbox />
      </CheckboxRow>
  );
}

Indeterminate​

indeterminate is controlled by the parent. Clear it in onChange when the user interacts — otherwise the minus icon keeps showing even after value updates. Clicking while indeterminate selects the checkbox.

Preview (Web)
import { Checkbox } from 'react-native-molecules/components/Checkbox';
import { useState } from 'react';

export default function Example() {
  const [value, setValue] = useState(false);
  const [indeterminate, setIndeterminate] = useState(true);

  return (
      <Checkbox
          value={value}
          indeterminate={indeterminate}
          onChange={next => {
              setValue(next);
              setIndeterminate(false);
          }}
      />
  );
}