expo-checkbox

Cross-platform checkbox component for boolean input

expo-checkbox

Version: 55.0.3

Basic boolean input component for Android, iOS and web.

Installation

npx expo install expo-checkbox

Usage

import Checkbox from 'expo-checkbox';
import { useState } from 'react';
import { Text, View } from 'react-native';

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

  return (
    <View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
      <Checkbox value={checked} onValueChange={setChecked} />
      <Text>Agree to terms</Text>
    </View>
  );
}

API Reference

Checkbox Props

value · boolean · required

Checkbox state

onValueChange · (value: boolean) => void

Called when checkbox state changes

disabled · boolean

Disables the checkbox

color · string

Color when checked

<Checkbox value={checked} color="#007AFF" />

Examples

Basic Checkbox

import Checkbox from 'expo-checkbox';
import { useState } from 'react';

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

  return (
    <Checkbox
      value={checked}
      onValueChange={setChecked}
      color="#007AFF"
    />
  );
}

Checkbox List

import Checkbox from 'expo-checkbox';
import { useState } from 'react';
import { View, Text } from 'react-native';

function CheckboxList() {
  const [selections, setSelections] = useState({
    option1: false,
    option2: false,
    option3: false
  });

  return (
    <View>
      {Object.entries(selections).map(([key, value]) => (
        <View key={key} style={{ flexDirection: 'row', gap: 8, marginBottom: 12 }}>
          <Checkbox
            value={value}
            onValueChange={(newValue) =>
              setSelections(prev => ({ ...prev, [key]: newValue }))
            }
          />
          <Text>{key}</Text>
        </View>
      ))}
    </View>
  );
}

Platform Support

Platform	Supported
iOS	✅
Android	✅
Web	✅

Resources

• Official Documentation
• GitHub Repository