web
mobile
Edit these docs Rate these docs

React Mobile Checkbox

React Mobile Checkbox - Bootstrap 4 & Material Design

React Mobile Checkbox is a component used for allowing a user to make a multiple choice. Broadly used in the forms and surveys. Checkboxes are made for selecting one or several options in a list, while radios are for selecting one option from many.


Basic examples

Android
Android checkbox
iOS
iOS checkbox

        <script>

        import React, { Component } from "react";
        import {View, ScrollView } from "react-native";
        import { MDBCheckbox, SelectedItemsToArray } from 'mdbreact-mobile';

        export default class CheckboxPage extends Component {

        selectedArrayOBJ = new SelectedItemsToArray();

          render() {
            return (
              <ScrollView>
                <View>
                  <Checkbox
                    keyValue={1}
                    selectedArrayObject={this.selectedArrayOBJ}
                  />
                  <Checkbox
                    keyValue={2}
                    selectedArrayObject={this.selectedArrayOBJ}
                  />
               </View>
              </ScrollView>
            );
          }
        }

        </script>
      

Colorful examples

Android
Android checkbox
iOS
iOS checkbox

        <script>

        import React, { Component } from "react";
        import {View, ScrollView } from "react-native";
        import { MDBCheckbox, SelectedItemsToArray } from 'mdbreact-mobile';

        export default class CheckboxPage extends Component {

        selectedArrayOBJ = new SelectedItemsToArray();

          render() {
            return (
              <ScrollView>
                <View>
                <Checkbox
                  keyValue={11}
                  color="danger"
                  selectedArrayObject={this.selectedArrayOBJ}
                />
                <Checkbox
                  keyValue={14}
                  color="success"
                  selectedArrayObject={this.selectedArrayOBJ}
                />
                <Checkbox
                  keyValue={15}
                  color="secondary"
                  selectedArrayObject={this.selectedArrayOBJ}
                />
                <Checkbox
                  keyValue={17}
                  color="dark"
                  selectedArrayObject={this.selectedArrayOBJ}
                />
               </View>
              </ScrollView>
            );
          }
        }

        </script>
      

Toggle example

Android
iOS

        <script>

        import React, { Component } from "react";
        import {View, ScrollView } from "react-native";
        import { MDBCheckbox, SelectedItemsToArray } from 'mdbreact-mobile';

        export default class CheckboxPage extends Component {

        selectedArrayOBJ = new SelectedItemsToArray();

          render() {
            return (
              <ScrollView>
                <View>
                  <Checkbox
                    keyValue={7}
                    label="Click to toggle"
                    labelColor="black"
                    color="blue"
                    selectedArrayObject={this.selectedArrayOBJ}
                  />
               </View>
              </ScrollView>
            );
          }
        }

        </script>
      

Rounded examples

Android
Android checkbox
iOS
iOS checkbox

        <script>

        import React, { Component } from "react";
        import {View, ScrollView } from "react-native";
        import { MDBCheckbox, SelectedItemsToArray } from 'mdbreact-mobile';

        export default class CheckboxPage extends Component {

        selectedArrayOBJ = new SelectedItemsToArray();

          render() {
            return (
              <ScrollView>
                <View>
                  <Checkbox
                    keyValue={117}
                    selectedArrayObject={this.selectedArrayOBJ}
                    rounded
                  />
                  <Checkbox
                    rounded
                    keyValue={152}
                    color="secondary"
                    selectedArrayObject={this.selectedArrayOBJ}
                  />
                  <Checkbox
                    rounded
                    keyValue={172}
                    color="info"
                    selectedArrayObject={this.selectedArrayOBJ}
                  />
               </View>
              </ScrollView>
            );
          }
        }

        </script>
      

Icons examples

Android
Android checkbox
iOS
iOS checkbox

        <script>

        import React, { Component } from "react";
        import {View, ScrollView } from "react-native";
        import { MDBCheckbox, SelectedItemsToArray } from 'mdbreact-mobile';

        export default class CheckboxPage extends Component {

        selectedArrayOBJ = new SelectedItemsToArray();

          render() {
            return (
              <ScrollView>
                <View>
                  <Checkbox
                    keyValue={1171}
                    selectedArrayObject={this.selectedArrayOBJ}
                    icon="home"
                    iconColor="black"
                  />
                  <Checkbox
                    keyValue={1521}
                    color="purple"
                    selectedArrayObject={this.selectedArrayOBJ}
                    icon={['fab', 'mdb']}
                  />
                  <Checkbox
                    keyValue={987}
                    color="brown"
                    selectedArrayObject={this.selectedArrayOBJ}
                    icon="arrow-up"
                  />
               </View>
              </ScrollView>
            );
          }
        }

        </script>
      

Sizes examples

Android
Android checkbox
iOS
iOS checkbox

        <script>

        import React, { Component } from "react";
        import {View, ScrollView } from "react-native";
        import { MDBCheckbox, SelectedItemsToArray } from 'mdbreact-mobile';

        export default class CheckboxPage extends Component {

        selectedArrayOBJ = new SelectedItemsToArray();

          render() {
            return (
              <ScrollView>
                <View>
                  <Checkbox
                    keyValue={678}
                    color="pink"
                    selectedArrayObject={this.selectedArrayOBJ}
                    size={15}
                  />
                  <Checkbox
                    keyValue={364}
                    color="orange"
                    selectedArrayObject={this.selectedArrayOBJ}
                    size={25}
                  />
                  <Checkbox
                    keyValue={467}
                    color="green"
                    selectedArrayObject={this.selectedArrayOBJ}
                    size={35}
                  />
               </View>
              </ScrollView>
            );
          }
        }

        </script>
      
Edit these docs Rate these docs

Checkbox - API

In this section you will find advanced information about the Checkbox component. You will find out which modules are required, what are the possibilities of configuring the component, and what events and methods you can use in working with it.


Import statement


            import { MDBChecbkox } from 'mdbreact-mobile'
      

API Reference: Properties

Name Type Default Description Example
checked boolean false Set checked to checkbox <MDBChecbkox checked />
size number 25 Set size to checkbox <MDBChecbkox size={25} />
color string primary Set color to checkbox <MDBChecbkox color='primary' />
labelColor string transparent Set color to checkbox label <MDBChecbkox labelColor='transparent' />
label string " " Set text to checkbox label <MDBChecbkox label=' ' />
value string default Set value to checkbox <MDBChecbkox value='default' />
icon string check Set icon to checkbox <MDBChecbkox icon='check' />
iconColor string #fff Set color to checkbox icon <MDBChecbkox iconColor='#fff' />