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.

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

• iconType
• Component
• checked
• size
• iconRight
• right
• center
• title
• titleProps
• containerStyle
• textStyle
• onLongPress
• onLongIconPress
• onPress
• onIconPress
• checkedIcon
• uncheckedIcon
• checkedColor
• uncheckedColor
• checkedTitle
• fontFamily

---

Reference

iconType

type of icon set. Supported sets here.

Type	Default
string	font-awesome

---

Component

Specify React Native component for main button (optional)

Type	Default
React Native Component	TouchableOpacity

---

checked

Flag for checking the icon (required)

Type	Default
boolean	false

---

size

Size of the checkbox

Type	Default
number	24

---

iconRight

Moves icon to right of text (optional)

Type	Default
boolean	false

---

right

Aligns checkbox to right (optional)

Type	Default
boolean	false

---

center

Aligns checkbox to center (optional)

Type	Default
boolean	false

---

title

Title of checkbox

Type	Default
string OR React Native Component	none

---

titleProps

Additional props for the title Text component (optional)

Type	Default
{...Text props}	none

---

containerStyle

Style of main container (optional)

Type	Default
object (style)	none

---

textStyle

Style of text (optional)

Type	Default
object (style)	none

---

onLongPress

onLongPress function for checkbox (optional)

Type	Default
function	none

---

onLongIconPress

onLongPress function for checkbox (optional)

Type	Default
function	none

---

onPress

onPress function for container (optional)

Type	Default
function	none

---

onIconPress

onPress function for checkbox (required)

Type	Default
function	none

---

checkedIcon

Default checked icon (Font Awesome Icon) (optional)

Type	Default
string OR React Native Component	check-square-o

---

uncheckedIcon

Default checked icon (Font Awesome Icon) (optional)

Type	Default
string OR React Native Component	square-o

---

checkedColor

Default checked color (optional)

Type	Default
string	green

---

uncheckedColor

Default unchecked color (optional)

Type	Default
string	#bfbfbf

---

checkedTitle

Specify a custom checked message (optional)

Type	Default
string	none

---

fontFamily

Specify different font family

Type	Default
string	System font bold (iOS), Sans Serif Bold (android)