Checkbox

Checkbox allows users to select one or more items from a set. Supports checked, unchecked, and indeterminate states.

Preview

✓

−

States

Unchecked

<Checkbox
  checked={false}
  onCheckedChange={setChecked}
  accessibilityLabel="Option"
/>

Checked

✓

Checked

<Checkbox
  checked={true}
  onCheckedChange={setChecked}
  accessibilityLabel="Option"
/>

Indeterminate

Used for “select all” when some children are selected.

−

Indeterminate

<Checkbox
  checked={someChecked}
  indeterminate={!allChecked && someChecked}
  onCheckedChange={toggleAll}
  accessibilityLabel="Select all"
/>

Sizes

✓

Size	Box	Usage
`sm`	16px	Compact lists, tables
`md`	20px	Default
`lg`	24px	Prominent selections

Disabled

✓

Disabled checked

<Checkbox
  checked={false}
  disabled
  onCheckedChange={() => {}}
  accessibilityLabel="Unavailable option"
/>

API Reference

Props

Prop	Type	Default	Description
`checked`	`boolean`	Required	Whether checked
`onCheckedChange`	`(checked: boolean) => void`	Required	Change handler
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Checkbox size
`disabled`	`boolean`	`false`	Disable interaction
`indeterminate`	`boolean`	`false`	Indeterminate state
`style`	`ViewStyle`	-	Custom styles
`accessibilityLabel`	`string`	Required	A11y label

Complete Example

import { Checkbox, Card, Text } from '@synchronicity/react-native';
import { View, StyleSheet } from 'react-native';
import { useState } from 'react';

function TrigramFilter() {
  const [selected, setSelected] = useState<string[]>([]);

  const trigrams = [
    { id: 'heaven', name: 'Heaven', symbol: '☰' },
    { id: 'earth', name: 'Earth', symbol: '☷' },
    { id: 'thunder', name: 'Thunder', symbol: '☳' },
    { id: 'water', name: 'Water', symbol: '☵' },
    { id: 'mountain', name: 'Mountain', symbol: '☶' },
    { id: 'wind', name: 'Wind', symbol: '☴' },
    { id: 'fire', name: 'Fire', symbol: '☲' },
    { id: 'lake', name: 'Lake', symbol: '☱' },
  ];

  const toggleTrigram = (id: string) => {
    setSelected(prev =>
      prev.includes(id)
        ? prev.filter(t => t !== id)
        : [...prev, id]
    );
  };

  const allSelected = selected.length === trigrams.length;
  const someSelected = selected.length > 0 && !allSelected;

  return (
    <Card>
      <View style={styles.header}>
        <Checkbox
          checked={allSelected}
          indeterminate={someSelected}
          onCheckedChange={(checked) => {
            setSelected(checked ? trigrams.map(t => t.id) : []);
          }}
          accessibilityLabel="Select all trigrams"
        />
        <Text style={styles.headerText}>Filter by Trigram</Text>
      </View>

      {trigrams.map(trigram => (
        <View key={trigram.id} style={styles.option}>
          <Checkbox
            checked={selected.includes(trigram.id)}
            onCheckedChange={() => toggleTrigram(trigram.id)}
            accessibilityLabel={`Select ${trigram.name}`}
          />
          <Text style={styles.symbol}>{trigram.symbol}</Text>
          <Text style={styles.name}>{trigram.name}</Text>
        </View>
      ))}
    </Card>
  );
}

const styles = StyleSheet.create({
  header: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 12,
    paddingBottom: 16,
    borderBottomWidth: 1,
    borderBottomColor: '#3a3a48',
  },
  headerText: {
    fontSize: 16,
    fontWeight: '600',
  },
  option: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 12,
    paddingVertical: 8,
  },
  symbol: {
    fontSize: 20,
  },
  name: {
    fontSize: 14,
  },
});