expo-checkbox

Open Beta Documentation Amazon offers this technical documentation as part of a pre-release, open beta. The features described might change as Amazon receives feedback and iterates on the features. For the most current feature information, see the Release Notes.

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.
Copied to clipboard.
```
 "dependencies": {
 ...
 "@amazon-devices/expo-checkbox": "~2.0.0"
 }
```
Reinstall dependencies using npm install command.

Examples

The following example demonstrates basic usage of Checkbox.

Copied to clipboard.

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