Expo Checkbox
A universal React component that provides basic checkbox functionality.
Android
iOS
Web
Included in Expo Go
For the complete documentation index, see llms.txt. Use this Use this file to discover all available pages.
expo-checkbox provides a basic boolean input element for all platforms.
Installation
Terminal
- npx expo install expo-checkboxUsage
Basic Checkbox usage
import Checkbox from 'expo-checkbox'; import { useState } from 'react'; import { StyleSheet, Text, View } from 'react-native'; export default function App() { const [isChecked, setChecked] = useState(false); return ( <View style={styles.container}> <View style={styles.section}> <Checkbox style={styles.checkbox} value={isChecked} onValueChange={setChecked} /> <Text style={styles.paragraph}>Normal checkbox</Text> </View> <View style={styles.section}> <Checkbox style={styles.checkbox} value={isChecked} onValueChange={setChecked} color={isChecked ? '#4630EB' : undefined} /> <Text style={styles.paragraph}>Custom colored checkbox</Text> </View> <View style={styles.section}> <Checkbox style={styles.checkbox} disabled value={isChecked} onValueChange={setChecked} /> <Text style={styles.paragraph}>Disabled checkbox</Text> </View> </View> ); } const styles = StyleSheet.create({ container: { flex: 1, marginHorizontal: 16, marginVertical: 32, }, section: { flexDirection: 'row', alignItems: 'center', }, paragraph: { fontSize: 15, }, checkbox: { margin: 8, }, });
API
import Checkbox from 'expo-checkbox';
Component
Type: React.Element<CheckboxProps>
Optional • Type:
ColorValueThe tint or color of the checkbox. This overrides the disabled opaque style.
Optional • Type:
booleanIf the checkbox is disabled, it becomes opaque and uncheckable.
Optional • Type:
(event: NativeSyntheticEvent<CheckboxEvent> | SyntheticEvent<HTMLInputElement, CheckboxEvent>) => voidCallback that is invoked when the user presses the checkbox.
event: NativeSyntheticEvent<CheckboxEvent> | SyntheticEvent<HTMLInputElement, CheckboxEvent>A native event containing the checkbox change.
Optional • Type:
(value: boolean) => voidCallback that is invoked when the user presses the checkbox.
value: booleanA boolean indicating the new checked state of the checkbox.
Optional • Type:
boolean • Default: falseValue indicating if the checkbox should be rendered as checked or not.