Skip to main content

​
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

PlatformSupported
iOS✅
Android✅
Web✅

​
Resources