Checkbox
Checkboxes allow the user to select one or more items from a set. - Material Docs
import { Checkbox } from 'material-bread';
Component #
The
Checkbox
component can have labels, custom icons, and custom colors.
Item 2
Live Editing
class CheckboxPage extends React.Component { constructor(props) { super(props) this.state = { checkedOne: true, checkedTwo: true, checkedThree: true, checkedFour: true, checkedFive: true } } render() { return ( <View style={{flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', flexWrap: 'wrap'}}> <Checkbox checked={this.state.checkedOne} onPress={() => this.setState({ checkedOne: !this.state.checkedOne })} /> <Checkbox rippleMatchesCheckbox checkboxColor={'#009688'} checked={this.state.checkedTwo} label={'Item 2'} onPress={() => this.setState({ checkedTwo: !this.state.checkedTwo })} /> <Checkbox rippleMatchesCheckbox checkboxColor={'#E91E63'} icon={'bookmark-border'} checkedIcon={'bookmark'} checked={this.state.checkedThree} onPress={() => this.setState({ checkedThree: !this.state.checkedThree })} /> <Checkbox indeterminate checkboxColor={'#F44336'} checked={this.state.checkedFour} onPress={() => this.setState({ checkedFour: !this.state.checkedFour })} /> <Checkbox checked={this.state.checkedFive} disabled onPress={() => this.setState({ checkedFive: !this.state.checkedFive })} /> </View> ); } }
Usage #
import React, { Component } from 'react';
import { View } from 'react-native';
import { Checkbox } from 'material-bread';
class CheckboxPage extends React.Component {
constructor(props) {
super(props)
this.state = {
checked: true,
}
}
render() {
return (
<View style={{flexDirection: 'row', alignItems: 'center'}}>
<Checkbox
checked={this.state.checked}
onPress={() => this.setState({ checked: !this.state.checked })}
/>
</View>
);
}
}
Props #
Name
Description
Type
Default
checkboxColor
Custom color for checked icon
string
checkboxStyle
Styles checkbox icon
object
checked
Wether the checkbox is filled or not
bool
false
checkedIcon
Renders checked icon
string || node
check-box
disabled
Toggles whether the checkbox can be changed
bool
error
Toggles error state
bool
icon
Renders unchecked icon
string || node
check-box-outline-blank
indeterminate
Toggle indeteminate state
bool
ios
Toggle dispalying ios checkbox
bool
false
label
Text for label of checkbox, has Onpress
bool
labelPos
Determines position of label
string
right
labelStyle
Styles label
object
onPress
Call back for clicking on the checkbox or label
func
rippleColor
Custom ripple color
string
rippleMatchesCheckbox
Default Material is dark ripple, this forces the ripple to match checkbox
bool
false
size
Scale the default icons while maintaining Material proportions
number
24
styles
Styles root container
object
textStyle
Styles for the text component
object
unCheckedColor
Custom color for unchecked icon
string
Demos #
You can see even more examples in the Storybook environment.
Labels #
Click me
Item 2
Bookmark
Left
Live Editing
class CheckboxPage extends React.Component { constructor(props) { super(props) this.state = { checkedOne: true, checkedTwo: true, checkedThree: true, checkedFour: true, } } render() { return ( <View style={{flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', flexWrap: 'wrap'}}> <Checkbox label={'Click me'} checked={this.state.checkedOne} onPress={() => this.setState({ checkedOne: !this.state.checkedOne })} /> <Checkbox rippleMatchesCheckbox checkboxColor={'#009688'} checked={this.state.checkedTwo} label={'Item 2'} labelStyle={{fontSize: 18, color:'#009688' }} onPress={() => this.setState({ checkedTwo: !this.state.checkedTwo })} /> <Checkbox rippleMatchesCheckbox checkboxColor={'#E91E63'} icon={'bookmark-border'} checkedIcon={'bookmark'} label={'Bookmark'} labelStyle={{fontSize: 14, color:'#E91E63' }} checked={this.state.checkedThree} onPress={() => this.setState({ checkedThree: !this.state.checkedThree })} /> <Checkbox rippleMatchesCheckbox checkboxColor={'#3F51B5'} label={'Left'} labelStyle={{fontSize: 14, color:'#3F51B5' }} labelPos={'left'} checked={this.state.checkedFour} onPress={() => this.setState({ checkedFour: !this.state.checkedFour })} /> </View> ); } }
Custom Icon #
Custom icons can be achieved by either passing a string or a node to
Icon
and checkedIcon
. The component will add the approriate color and toggle them based on checked
.
Error
Alerts
Live Editing
class CheckboxPage extends React.Component { constructor(props) { super(props) this.state = { checkedOne: true, checkedTwo: true, checkedThree: true, checkedFour: true, } } render() { return ( <View style={{flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', flexWrap: 'wrap'}}> <Checkbox icon={'favorite-border'} checkedIcon={'favorite'} checked={this.state.checkedOne} onPress={() => this.setState({ checkedOne: !this.state.checkedOne })} /> <Checkbox rippleMatchesCheckbox checkboxColor={'#009688'} checked={this.state.checkedTwo} icon={<Icon name="lock-open" />} checkedIcon={<Icon name="lock" />} onPress={() => this.setState({ checkedTwo: !this.state.checkedTwo })} /> <Checkbox rippleMatchesCheckbox checkboxColor={'#E91E63'} icon={<Icon name="error-outline" size={30} />} checkedIcon={<Icon name="error" size={30} />} checkboxStyle={{width: 42, height: 42}} label={'Error'} labelStyle={{fontSize: 18, color:'#E91E63' }} checked={this.state.checkedThree} onPress={() => this.setState({ checkedThree: !this.state.checkedThree })} /> <Checkbox rippleMatchesCheckbox checkboxColor={'#3F51B5'} label={'Alerts'} labelStyle={{fontSize: 14, color:'#3F51B5' }} labelPos={'left'} checkedIcon={'notifications'} icon={'notifications-none'} checked={this.state.checkedFour} onPress={() => this.setState({ checkedFour: !this.state.checkedFour })} /> </View> ); } }
iOS #
Platform guidelines suggest using an iOS checkbox, you can accomplish this by adding the
ios
prop. The unchecked state is usually blank.
Toggle
Disabled
Error
Live Editing
class CheckboxPage extends React.Component { constructor(props) { super(props) this.state = { checkedOne: true, checkedTwo: true, checkedThree: true, checkedFour: true, } } render() { return ( <View style={{flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', flexWrap: 'wrap'}}> <Checkbox ios checked={this.state.checkedOne} onPress={() => this.setState({ checkedOne: !this.state.checkedOne })} /> <Checkbox ios rippleMatchesCheckbox checkboxColor={'#009688'} checked={this.state.checkedTwo} label={'Toggle'} onPress={() => this.setState({ checkedTwo: !this.state.checkedTwo })} /> <Checkbox ios disabled checkboxColor={'#E91E63'} label={'Disabled'} checked={this.state.checkedThree} onPress={() => this.setState({ checkedThree: !this.state.checkedThree })} /> <Checkbox ios error checkboxColor={'#E91E63'} label={'Error'} checked={this.state.checkedFour} onPress={() => this.setState({ checkedFour: !this.state.checkedFour })} /> </View> ); } }