Rate this docs

Checkbox MDB Pro component

React Bootstrap checkbox

Checkbox is a component used for allowing a user to make a multiple choice. Broadly used in the forms and surveys.

Checkboxes are for selecting one or several options in a list, while radios are for selecting one option from many.


Basic examples

Default styling for Bootstrap Checkbox component



            import React from 'react';
            import { Input } from 'mdbreact';

            class InputPage extends React.Component {
              render () {
                return(
                  <div>
                    {/* Filled-in unchecked */}
                    <Input label="Filled-in unchecked" filled type="checkbox" id="checkbox1" />

                    {/* Filled-in checked */}
                    <Input label="Filled-in unchecked" filled checked type="checkbox" id="checkbox2" />

                    {/* Filled-in unchecked disabled */}
                    <Input label="Filled-in unchecked" filled disabled type="checkbox" id="checkbox3" />

                    {/* Filled-in checked disabled */}
                    <Input label="Filled-in unchecked" filled checked disabled type="checkbox" id="checkbox4" />
                  </div>
                )
              }
            }

            export default InputPage;

          

Material checkboxes

Material Design styling for Bootstrap Checkbox component



              import React from 'react';
              import { Input } from 'mdbreact';

              class InputPage extends React.Component {
                render () {
                  return(
                    <div>
                      {/* Material unchecked */}
                      <Input label="Filled-in unchecked" type="checkbox" id="checkbox1" />

                      {/* Material checked */}
                      <Input label="Filled-in unchecked" checked type="checkbox" id="checkbox2" />

                      {/* Material unchecked disabled */}
                      <Input label="Filled-in unchecked" disabled type="checkbox" id="checkbox3" />

                      {/* Material checked disabled */}
                      <Input label="Filled-in unchecked" checked disabled type="checkbox" id="checkbox4" />
                    </div>
                  )
                }
              }

              export default InputPage;

            

Checked state

Add checked prop to the <Input> component to pre-select checkbox when the page loads. The checked prop is a boolean attribute.The checked attribute can be used with <Input type="checkbox"> and <Input type="radio">.

Default checkbox



              import React from 'react';
              import { Input } from 'mdbreact';

              class InputPage extends React.Component {
                render () {
                  return(
                    <div>
                      {/* Filled-in checked */}
                      <Input label="Filled-in unchecked" filled checked type="checkbox" id="checkbox2" />
                    </div>
                  )
                }
              }

              export default InputPage;

            

Material checkbox



              import React from 'react';
              import { Input } from 'mdbreact';

              class InputPage extends React.Component {
                render () {
                  return(
                    <div>
                      {/* Material checked */}
                      <Input label="Filled-in unchecked" checked type="checkbox" id="checkbox2" />
                    </div>
                  )
                }
              }

              export default InputPage;

            

Disabled state

Add the disabled boolean attribute to the <Input> component and the custom indicator and label description will be automatically styled and blocked. A disabled <Input> component is unusable and un-clickable.

Default checkbox



              import React from 'react';
              import { Input } from 'mdbreact';

              class InputPage extends React.Component {
                render () {
                  return(
                    <div>
                      {/* Filled-in unchecked disabled */}
                      <Input label="Filled-in unchecked" filled disabled type="checkbox" id="checkbox3" />

                      {/* Filled-in checked disabled */}
                      <Input label="Filled-in unchecked" filled checked disabled type="checkbox" id="checkbox4" />
                    </div>
                  )
                }
              }

              export default InputPage;

            

Material checkbox



              import React from 'react';
              import { Input } from 'mdbreact';

              class InputPage extends React.Component {
                render () {
                  return(
                    <div>
                      {/* Material unchecked disabled */}
                      <Input label="Filled-in unchecked" disabled type="checkbox" id="checkbox3" />

                      {/* Material checked disabled */}
                      <Input label="Filled-in unchecked" checked disabled type="checkbox" id="checkbox4" />
                    </div>
                  )
                }
              }

              export default InputPage;

            

Inline

Group checkboxes or radios on the same horizontal row by wraping <Input> components in <FormInline> component.

Default checkboxes



              import React from 'react';
              import { Input, FormInline } from 'mdbreact';

              class InputPage extends React.Component {
                render () {
                  return(
                    <div>
                      {/* Filled-in inline */}
                      <FormInline>
                        <Input label="1" filled type="checkbox" id="checkbox1" />
                        <Input label="2" filled type="checkbox" id="checkbox2" />
                        <Input label="3" filled type="checkbox" id="checkbox3" />
                      </FormInline>
                    </div>
                  )
                }
              }

              export default InputPage;

            

Material checkboxes



              import React from 'react';
              import { Input, FormInline } from 'mdbreact';

              class InputPage extends React.Component {
                render () {
                  return(
                    <div>
                      {/* Material inline */}
                      <FormInline>
                        <Input label="1" type="checkbox" id="checkbox1" />
                        <Input label="2" type="checkbox" id="checkbox2" />
                        <Input label="3" type="checkbox" id="checkbox3" />
                      </FormInline>
                    </div>
                  )
                }
              }

              export default InputPage;

            

React 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.


Checkbox import statement

In order to use Checkbox component make sure you have imported proper module first.


            import { Input } from 'mdbreact';
        

Checkbox PropTypes

The table below shows the configuration options of the checkbox component.

Name Type Default Description Example
checked Boolean false Pre-selects checkbox when the page loads. <Input checked ... />
className String Adds custom class to Input component <Input className="myClass" ... />
containerClass String Adds custom class to wrapping div <Input containerClass="wrapper" ... />
disabled Boolean false Disables input component <Input disabled ... />
filled Boolean Add filled-in style to checkbox <Input filled ... />
group Boolean false Add .form-group class to the wrapping div <Input group ... />
icon String Adds icon prefix. <Input icon="envelope" ... />
iconClass String Adds custom class to icon element <Input className="iconRed" ... />
id String The id of the input element. Required <Input id="myId" ... />
label String Add desctiption to the component <Input label="My custom checkbox" ... />
labelClass String Adds custom class to the label <Input className="labelCustomClass" ... />
type String The type of the input element. <Input type="checkbox" ... />
validate String Adds .validate class to the Input comonent <Input validate ... />
value String The value of the input element. <Input value="2018" ... />
getValue String Returns checkbox value on change <Input getValue={this.printValue} ... />

React Checkbox - examples & customization

Quickly get a project started with any of our examples.


Checkbox color change



        {/* Teal example */}
        <Input containerClass="form-check checkbox-teal" labelClass="form-check-label" label="Teal checkbox" type="checkbox" id="tealExample" checked/>

        {/* Filled-in orange example */}
        <Input containerClass="form-check checkbox-warning-filled" filled labelClass="form-check-label" label="Filled-in orange example" type="checkbox"  id="orangeExample" checked/>

      


          .checkbox-teal [type="checkbox"]:checked+label:before {
            border-color: transparent #009688 #009688 transparent;
          }

          .checkbox-warning-filled [type="checkbox"][class*='filled-in']:checked+label:after {
            border-color: #FF8800;
            background-color: #FF8800;
          }

      

Rounded checkbox



        {/* Filled-in rounded example */}
        <Input containerClass="form-check checkbox-rounded" labelClass="form-check-label" label="Filled-in rounded example" type="checkbox" className="checkbox-rounded" filled id="roundedExample" checked/>

      


        .checkbox-rounded [type="checkbox"][class*='filled-in']+label:after {
          border-radius: 50%;
        }