Skip to main content
Version: 3.4.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

center

Aligns checkbox to center (optional)

TypeDefault
booleanfalse

checked

Flag for checking the icon (required)

TypeDefault
booleanfalse

checkedColor

Default checked color (optional)

TypeDefault
stringgreen

checkedIcon

Default checked icon (Font Awesome Icon) (optional)

TypeDefault
string OR React Native Componentcheck-square-o

checkedTitle

Specify a custom checked message (optional)

TypeDefault
stringnone

Component

Specify React Native component for main button (optional)

TypeDefault
React Native ComponentTouchableOpacity

containerStyle

Style of main container (optional)

TypeDefault
object (style)none

fontFamily

Specify different font family

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

iconRight

Moves icon to right of text (optional)

TypeDefault
booleanfalse

iconType

type of icon set. Supported sets here.

TypeDefault
stringfont-awesome

onIconPress

onPress function for checkbox (required)

TypeDefault
functionnone

onLongIconPress

onLongPress function for checkbox (optional)

TypeDefault
functionnone

onLongPress

onLongPress function for checkbox (optional)

TypeDefault
functionnone

onPress

onPress function for container (optional)

TypeDefault
functionnone

Aligns checkbox to right (optional)

TypeDefault
booleanfalse

size

Size of the checkbox

TypeDefault
number24

textStyle

Style of text (optional)

TypeDefault
object (style)none

title

Title of checkbox

TypeDefault
string OR React Native Componentnone

titleProps

Additional props for the title Text component (optional)

TypeDefault
{...Text props}none

uncheckedColor

Default unchecked color (optional)

TypeDefault
string#bfbfbf

uncheckedIcon

Default checked icon (Font Awesome Icon) (optional)

TypeDefault
string OR React Native Componentsquare-o