as

Settings
Sign out
Notifications
Alexa
Amazon Appstore
AWS
Documentation
Support
Contact Us
My Cases
Get Started
Design and Develop
Publish
Reference
Support

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

  1. Add the JavaScript library dependency in the package.json file.

    Copied to clipboard.

     "dependencies": {
     ...
     "@amazon-devices/expo-checkbox": "~2.0.0"
     }
    
  2. 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