Material Bread
v0.2.10
Home
Getting Started
React Native
Web
Electron
MacOS
Windows
NextJs
Expo
Vue Native
Style
Font
Icons
Theme
Components
Appbar
Searchbar
Appbar Bottom
Avatar
Backdrop
Badge
Banner
Bottom Navigation
Bottom Navigation Item
Button
Card
CardActions
CardContent
CardHeader
CardMedia
Checkbox
Chip
DataTable
DataTableCell
DataTableHeader
DataTablePagination
DataTableRow
Dialog
Divider
Drawer
DrawerHeader
DrawerItem
DrawerSection
DrawerBottom
Fab
Speed dial
Icon
IconButton
List
ListExpand
ListItem
ListSection
Menu
MenuItem
Paper
Progress Bar
Progress Circle
Radio Button
Ripple
Select
SheetBottom
SheetSide
Slider
Snackbar
SwipeNav
Switch
Tabs
Tab
Textfield
Searchfield
ToggleButton
ToggleButtonGroup
Tooltip
Typography
Utils
Anchor
Color
Hoverable
Shadow
Storybook
Showcase
Contributing
Library
Docs
About

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>
    );
  }
}