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

right#

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)