expo-checkbox
The @amazon-devices/expo-checkbox
library provides a basic boolean
input for Android, iOS, web, and Vega. If you are looking for a more flexible component, see the guide to implementing your own checkbox.
Installation
- Add the JavaScript library dependency in the
package.json
file."dependencies": { ... "@amazon-devices/expo-checkbox": "~2.0.0" }
- Reinstall dependencies using
npm install
command.
Examples
The following example demonstrates basic usage of Checkbox
.
import React, {useState} from 'react';
import {StyleSheet, View, Text} from 'react-native';
import Checkbox from '@amazon-devices/expo-checkbox';
export const App = () => {
const [isChecked, setChecked] = useState(false);
return (
<View style={styles.container}>
<View style={styles.checkboxContainer}>
<Checkbox
style={styles.checkbox}
value={isChecked}
onValueChange={setChecked}
/>
<Text style={styles.label}>Checkbox</Text>
</View>
<Text>Is Selected: {isChecked ? 'true' : 'false'}</Text>
<View style={styles.checkboxContainer}>
<Checkbox
style={styles.checkbox}
value={isChecked}
onValueChange={setChecked}
color={isChecked ? '#E22E07' : undefined}
/>
<Text style={styles.label}>Custom color</Text>
</View>
<View style={styles.checkboxContainer}>
<Checkbox
style={styles.checkbox}
disabled
value={isChecked}
onValueChange={setChecked}
/>
<Text style={styles.label}>Disabled checkbox</Text>
</View>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
backgroundColor: 'white',
},
checkboxContainer: {
flexDirection: 'row',
marginVertical: 10,
},
checkbox: {
alignSelf: 'center',
},
label: {
margin: 8,
},
});
API reference
Check out the official Expo documentation for expo-checkbox page for more details about this library and API reference information.
Components
Component | Description |
---|---|
Checkbox |
boolean input element |
Checkbox props
Prop | Description |
---|---|
color |
The tint or color of the checkbox. This overrides the disabled opaque style |
disabled |
If you disable the checkbox, it becomes opaque and uncheckable |
onChange |
A callback invoked when the customer presses the checkbox |
onValueChange |
A callback invoked when the customer presses the checkbox |
value |
The value showing if the checkbox renders as checked or not |
Supported versions
Package Version | Based On | @amazon-devices/react-native-kepler version |
---|---|---|
2.0.x | 2.6.0 | 2.0.x |
Additional resources
For information on additional libraries, see Supported Third-Party Libraries and Services.
Last updated: Sep 30, 2025