HomeGuidesReferenceLearn

Expo Checkbox

GitHub

npm


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

Static Methods

Deprecated. Currently, Checkbox supports all the platforms, so isAvailableAsync() method is deprecated and will be removed in future releases.

isAvailableAsync()

Returns


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.