Skip to main content
Version: 1.2.0

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
stringnone

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)