Checkbox

React Bootstrap 5 Checkbox component

The checkbox is a component used to allow a user to make multiple choices that are broadly used in forms and surveys. Checkboxes are used to select one or several options in a list, while radio (option) buttons are for selecting one option from many.

Basic example

Browser default checkboxes and radios are replaced with the help of .form-check, a series of classes for both input types that improves the layout and behavior of their HTML elements, that provide greater customization and cross browser consistency. Checkboxes are for selecting one or several options in a list, while radios are for selecting one option from many.

Structurally, our <input>s and <label>s are sibling elements as opposed to an <input> within a <label>. This is slightly more verbose as you must specify id and for attributes to relate the <input> and <label>.

We use the sibling selector (~) for all our <input> states, like :checked or :disabled. When combined with the .form-check-label class, we can easily style the text for each item based on the <input>'s state. 

        
            
            import React from 'react';
            import { MDBCheckbox } from 'mdb-react-ui-kit';
    
            export default function App() {
              return (
                <>
                  <MDBCheckbox name='flexCheck' value='' id='flexCheckDefault' label='Default checkbox' />
                  <MDBCheckbox name='flexCheck' value='' id='flexCheckChecked' label='Checked checkbox' defaultChecked />
                </>
              );
            }

Controlled value

Use the checked property to set the checkbox state. The state will not change until the property is modified. You can also add an event handler to the onChange event to manage the checkbox's state. 

        
            
            import React, { useState } from 'react';
            import { MDBCheckbox } from 'mdb-react-ui-kit';

            export default function App() {
              const [checked, setChecked] = useState(false);

              return (
                <>
                  <MDBCheckbox
                    id='controlledCheckbox'
                    label='Controlled checkbox'
                    checked={checked}
                    onChange={() => setChecked(!checked)}
                  />
                </>
              );
            }

Disabled

Add the disabled property and the associated <label>s are automatically styled to match with a lighter color to help indicate the input’s state. 

        
            
            import React from 'react';
            import { MDBCheckbox } from 'mdb-react-ui-kit';
    
            export default function App() {
              return (
                <>
                  <MDBCheckbox name='disabledCheck' value='' id='flexCheckDisabled' disabled label='Disabled checkbox' />
                  <MDBCheckbox name='disabledCheck' value='' id='flexCheckCheckedDisabled' defaultChecked disabled label='Disabled checked checkbox' />
                </>
              );
            }

Inline

Group checkboxes or radios on the same horizontal row by adding inline property. 

        
            
            import React from 'react';
            import { MDBCheckbox } from 'mdb-react-ui-kit';
    
            export default function App() {
              return (
                <>
                  <MDBCheckbox name='inlineCheck' id='inlineCheckbox1' value='option1' label='1' inline />
                  <MDBCheckbox name='inlineCheck' id='inlineCheckbox2' value='option2' label='2' inline />
                  <MDBCheckbox name='inlineCheck' id='inlineCheckbox3' value='option3' label='3 (disabled)' disabled inline />
                </>
              );
            }

Without labels

Omit the label property for checkboxes and radios that have no label text. Remember to still provide some form of label for assistive technologies (for instance, using aria-label). 

        
            
            import React from 'react';
            import { MDBCheckbox } from 'mdb-react-ui-kit';
    
            export default function App() {
              return (
                <>
                  <MDBCheckbox name='checkNoLabel' id='checkboxNoLabel' value='' aria-label='...' />
                  <MDBCheckbox name='checkNoLabel' id='checkboxNoLabe2' value='' aria-label='...' />
                </>
              );
            }

Toggle buttons

MDB’s .btn styles can be applied to <label>s, to provide checkbox style button toggling. Add an MDBCheckbox with a btn property to toggle the input state. You can change the color using btnColor property. 

        
            
            import React from 'react';
            import { MDBCheckbox, MDBBtnGroup } from 'mdb-react-ui-kit';
    
            export default function App() {
              return (
                <MDBBtnGroup>
                  <MDBCheckbox name='btnCheck' btn id='btn-check' wrapperTag='span' label='Checkbox button' />
                  <MDBCheckbox name='btnCheck' btn id='btn-check2' wrapperClass='mx-2' wrapperTag='span' label='Checkbox button' defaultChecked />
                  <MDBCheckbox name='btnCheck' btn id='btn-check3' wrapperTag='span' label='Checkbox button' />
                </MDBBtnGroup>
              );
            }

Checkbox - API

Import

        
            
            import { MDBCheckbox } from 'mdb-react-ui-kit';

Properties

MDBCheckbox

Name Type Default Description Example
btn boolean '' Makes a button from the MDBCheckbox <MDBCheckbox btn label="Example label" id="checkboxExample" />
btnColor string '' Allows to set the color of the button checkbox <MDBCheckbox btn btnColor="secondary" label="Example label" id="checkboxExample" />
checked boolean '' Defines whether the checkbox is checked <MDBCheckbox defaultChecked label="Example label" id="checkboxExample" />
defaultChecked boolean '' Makes the MDBCheckbox checked by default <MDBCheckbox defaultChecked label="Example label" id="checkboxExample" />
disabled string '' Makes the MDBCheckbox disabled <MDBCheckbox disabled label="Example label" id="checkboxExample" />
disableWrapper boolean false Disables input wrapper <MDBCheckbox disableWrapper />
id string '' Defines an id for the MDBCheckbox <MDBCheckbox label="Example label" id="inputExample" />
inline boolean '' Places the MDBCheckbox in one row <MDBCheckbox inline label="Example label" id="checkboxExample" />
inputRef React.RefObject undefined Reference to input element <MDBCheckbox inputRef={inputReference} />
label React.ReactNode '' Defines a label content for the MDBCheckbox <MDBCheckbox label="Example label" id="inputExample" />
labelId string '' Defines an id for the label <MDBCheckbox label="Example label" labelId="exampleLabel" id="checkboxExample" />
labelClass string '' Adds custom classes to the label <MDBCheckbox label="Example label" labelId="exampleLabel" labelClass="test-class" id="checkboxExample" />
labelStyle React.CSSProperties undefined Adds custom styles to the label <MDBCheckbox label="Example label" labelStyle={{color: 'red'}} />
name string '' Specifies the name for the MDBCheckbox <MDBCheckbox name="sampleName" label="Example label" id="inputExample" />
value string '' Sets the value for the MDBCheckbox <MDBCheckbox value="Example value" label="Example label" id="inputExample" />
wrapperTag string '' Defines a tag type for the wrapper of the MDBCheckbox <MDBCheckbox label="Example label" wrapperTag="span" id="exampleID" />
wrapperClass string '' Adds custom classes to the wrapper of the MDBCheckbox <MDBCheckbox wrapperClass="custom-class" label="Example label" id="checkboxExample" />
wrapperStyle React.CSSProperties undefined Adds custom styles to the wrapper <MDBCheckbox label="Example label" wrapperStyle={{color: 'red'}} />