HomeGuidesReferenceLearn

Reference version

ArchiveExpo SnackDiscord and ForumsNewsletter

Expo Checkbox

GitHub

npm

A universal React component that provides basic checkbox functionality.


expo-checkbox provides a basic boolean input element for all platforms. If you are looking for a more flexible checkbox component, please see the guide to implementing your own checkbox.

Platform Compatibility

Android DeviceAndroid EmulatoriOS DeviceiOS SimulatorWeb

Installation

Terminal
npx expo install expo-checkbox

Usage

Basic Checkbox usage
import Checkbox from 'expo-checkbox';
import React, { 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

Checkbox

Type: React.PureComponent<CheckboxProps>

Props

color

Optional • Type: ColorValue

The tint or color of the checkbox. This overrides the disabled opaque style.

disabled

Optional • Type: boolean

If the checkbox is disabled, it becomes opaque and uncheckable.

onChange

Optional • Type: (event: NativeSyntheticEvent<CheckboxEvent> | SyntheticEvent<HTMLInputElement, CheckboxEvent>) => void

Callback that is invoked when the user presses the checkbox.

onValueChange

Optional • Type: (value: boolean) => void

Callback that is invoked when the user presses the checkbox.

value

Optional • Type: boolean • Default: false

Value indicating if the checkbox should be rendered as checked or not.

Inherited Props

  • ViewProps

Types

CheckboxEvent

NameTypeDescription
targetany

On native platforms, a NodeHandle for the element on which the event has occurred. On web, a DOM node on which the event has occurred.

valueboolean

A boolean representing checkbox current value.