Back to React Native Paper

Checkbox

docs/public/2.0/checkbox.html

5.15.11.3 KB
Original Source

Checkbox

Checkboxes allow the selection of multiple options from a set.

Android (enabled)

Android (disabled)

iOS (enabled)

iOS (disabled)

Usage

js
import * as React from 'react';
import { Checkbox } from 'react-native-paper';

export default class MyComponent extends React.Component {
  state = {
    checked: false,
  };

  render() {
    const { checked } = this.state;
    return (
      <Checkbox
        status={checked ? 'checked' : 'unchecked'}
        onPress={() => { this.setState({ checked: !checked }); }}
      />
    );
  }
}

Props

status (required) Type: 'checked' | 'unchecked' | 'indeterminate'

Status of checkbox.

disabled Type: boolean

Whether checkbox is disabled.

onPress Type: () => mixed

Function to execute on press.

uncheckedColor Type: string

Custom color for unchecked checkbox.

color Type: string

Custom color for checkbox.

theme Type: Theme

Static properties

These properties can be accessed on Checkbox by using the dot notation, e.g. Checkbox.Android.

Android

IOS