Skip to main content
Version: 2.3.2

CheckBox

CheckBoxes allow users to complete tasks that involve making choices such as selecting options, or switching settings on or off. It provides a clear visual of either a true or false choice.

Checkboxes

Usage

import { CheckBox } from 'react-native-elements'

<CheckBox
title='Click Here'
checked={this.state.checked}
/>

<CheckBox
center
title='Click Here'
checked={this.state.checked}
/>

<CheckBox
center
title='Click Here'
checkedIcon='dot-circle-o'
uncheckedIcon='circle-o'
checked={this.state.checked}
/>

<CheckBox
center
title='Click Here to Remove This Item'
iconRight
iconType='material'
checkedIcon='clear'
uncheckedIcon='add'
checkedColor='red'
checked={this.state.checked}
/>

<CheckBox
checkedIcon={<Image source={require('../checked.png')} />}
uncheckedIcon={<Image source={require('../unchecked.png')} />}
checked={this.state.checked}
onPress={() => this.setState({checked: !this.state.checked})}
/>

Props


Reference

iconType

type of icon set. Supported sets here.

TypeDefault
stringfont-awesome

Component

Specify React Native component for main button (optional)

TypeDefault
React Native ComponentTouchableOpacity

checked

Flag for checking the icon (required)

TypeDefault
booleanfalse

size

Size of the checkbox

TypeDefault
number24

iconRight

Moves icon to right of text (optional)

TypeDefault
booleanfalse

Aligns checkbox to right (optional)

TypeDefault
booleanfalse

center

Aligns checkbox to center (optional)

TypeDefault
booleanfalse

title

Title of checkbox

TypeDefault
string OR React Native Componentnone

titleProps

Additional props for the title Text component (optional)

TypeDefault
{...Text props}none

containerStyle

Style of main container (optional)

TypeDefault
object (style)none

textStyle

Style of text (optional)

TypeDefault
object (style)none

onLongPress

onLongPress function for checkbox (optional)

TypeDefault
functionnone

onLongIconPress

onLongPress function for checkbox (optional)

TypeDefault
functionnone

onPress

onPress function for container (optional)

TypeDefault
functionnone

onIconPress

onPress function for checkbox (required)

TypeDefault
functionnone

checkedIcon

Default checked icon (Font Awesome Icon) (optional)

TypeDefault
string OR React Native Componentcheck-square-o

uncheckedIcon

Default checked icon (Font Awesome Icon) (optional)

TypeDefault
string OR React Native Componentsquare-o

checkedColor

Default checked color (optional)

TypeDefault
stringgreen

uncheckedColor

Default unchecked color (optional)

TypeDefault
string#bfbfbf

checkedTitle

Specify a custom checked message (optional)

TypeDefault
stringnone

fontFamily

Specify different font family

TypeDefault
stringSystem font bold (iOS), Sans Serif Bold (android)