React Bootstrap Checkbox

React Checkbox - Bootstrap 4 & Material Design

Note: This documentation is for an older version of Bootstrap (v.4). A newer version is available for Bootstrap 5. We recommend migrating to the latest version of our product - Material Design for Bootstrap 5.
Go to docs v.5

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';

const InputPage = () => {
  return (
    <div>
      {/* Default unchecked */}
      <div class="custom-control custom-checkbox">
        <input type="checkbox" class="custom-control-input" id="defaultUnchecked">
        <label class="custom-control-label" for="defaultUnchecked">Default unchecked</label>
      </div>

      {/* Default checked */}
      <div class="custom-control custom-checkbox">
        <input type="checkbox" class="custom-control-input" id="defaultChecked" checked>
        <label class="custom-control-label" for="defaultChecked">Default checked</label>
      </div>

      {/* Default indeterminate */}
      <div class="custom-control custom-checkbox">
        <input type="checkbox" class="custom-control-input" id="defaultIndeterminate" checked>
        <label class="custom-control-label" for="defaultIndeterminate">Default indeterminate</label>
      </div>

      {/* Default unchecked disabled */}
      <div class="custom-control custom-checkbox">
        <input type="checkbox" class="custom-control-input" id="defaultUncheckedDisabled" disabled>
        <label class="custom-control-label" for="defaultUncheckedDisabled">Default unchecked disabled</label>
      </div>

      {/* Default checked disabled */}
      <div class="custom-control custom-checkbox">
        <input type="checkbox" class="custom-control-input" id="defaultCheckedDisabled" checked disabled>
        <label class="custom-control-label" for="defaultCheckedDisabled">Default checked disabled</label>
      </div>
    </div>
  )
}

export default InputPage;

Material checkboxes MDB Pro component

Material Design styling for Bootstrap Checkbox component

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

const InputPage = () => {
  return (
    <div>
      {/* Material unchecked */}
      <MDBInput label="Material unchecked" type="checkbox" id="checkbox1" />

      {/* Material checked */}
      <MDBInput label="Material unchecked" checked type="checkbox" id="checkbox2" />

      {/* Material unchecked disabled */}
      <MDBInput label="Material unchecked" disabled type="checkbox" id="checkbox3" />

      {/* Material checked disabled */}
      <MDBInput label="Material 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 { MDBInput } from 'mdbreact';

const InputPage = () => {
  return (
    <div>
      {/* Default checked */}
      <div class="custom-control custom-checkbox">
        <input type="checkbox" class="custom-control-input" id="defaultChecked2" checked>
        <label class="custom-control-label" for="defaultChecked2">Default checked</label>
      </div>
    </div>
  )
}

export default InputPage;

Material checkbox MDB Pro component 

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

const InputPage = () => {
  return (
    <div>
      {/* Material checked */}
      <MDBInput label="Filled-in unchecked" checked type="checkbox" id="checkbox2" />
    </div>
  )
}

export default InputPage;

Indeterminate state

Note: The indeterminate state is visual only. The checkbox is still either checked or unchecked as a state.

If you want to use indeterminate state you have to set a indeterminate prop to true

Default checkbox 

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

const InputPage = () => {
  return (
    <div>
      {/* Default unchecked disabled */}
      <div class="custom-control custom-checkbox">
        <input type="checkbox" class="custom-control-input" id="defaultUncheckedDisabled2" indeterminate>
        <label class="custom-control-label" for="defaultUncheckedDisabled2">Default unchecked disabled</label>
      </div>
    </div>
  )
}

export default InputPage;

Material checkbox MDB Pro component 

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

const InputPage = () => {
  return (
    <div>
      {/* Material indeterminate */}
      <MDBInput label='Material indeterminate' type='checkbox' id='checkbox23' indeterminate />
    </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 { MDBInput } from 'mdbreact';

const InputPage = () => {
  return (
    <div>
      {/* Default unchecked disabled */}
      <div class="custom-control custom-checkbox">
        <input type="checkbox" class="custom-control-input" id="defaultUncheckedDisabled2" disabled>
        <label class="custom-control-label" for="defaultUncheckedDisabled2">Default unchecked disabled</label>
      </div>

      {/* Default checked disabled */}
      <div class="custom-control custom-checkbox">
        <input type="checkbox" class="custom-control-input" id="defaultCheckedDisabled2" checked disabled>
        <label class="custom-control-label" for="defaultCheckedDisabled2">Default checked disabled</label>
      </div>
    </div>
  )
}

export default InputPage;

Material checkbox MDB Pro component 

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

const InputPage = () => {
  return (
    <div>
      {/* Material unchecked disabled */}
      <MDBInput label="Filled-in unchecked" disabled type="checkbox" id="checkbox3" />

      {/* Material checked disabled */}
      <MDBInput 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 { MDBInput, MDBFormInline } from 'mdbreact';

const InputPage = () => {
  return (
    <div>
      {/* Default inline 1 */}
      <div class="custom-control custom-checkbox custom-control-inline">
        <input type="checkbox" class="custom-control-input" id="defaultInline1">
        <label class="custom-control-label" for="defaultInline1">1</label>
      </div>

      {/* Default inline 2 */}
      <div class="custom-control custom-checkbox custom-control-inline">
        <input type="checkbox" class="custom-control-input" id="defaultInline2">
        <label class="custom-control-label" for="defaultInline2">2</label>
      </div>

     {/* Default inline 3 */}
      <div class="custom-control custom-checkbox custom-control-inline">
        <input type="checkbox" class="custom-control-input" id="defaultInline3">
        <label class="custom-control-label" for="defaultInline3">3</label>
      </div>
    </div>
  );
};

export default InputPage;

Material checkboxes MDB Pro component 

import React from 'react';
import { MDBInput, MDBFormInline } from 'mdbreact';

const InputPage = () => {
  return (
    <div>
      {/* Material inline */}
      <MDBFormInline>
        <MDBInput
          label='1'
          type='checkbox'
          id='checkbox1'
          containerClass='mr-5'
        />
        <MDBInput
          label='2'
          type='checkbox'
          id='checkbox2'
          containerClass='mr-5'
        />
        <MDBInput
          label='3'
          type='checkbox'
          id='checkbox3'
          containerClass='mr-5'
        />
      </MDBFormInline>
    </div>
  );
};

export default InputPage;

Filled checkbox MDB Pro component

Filled styles checkboxes.

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

const InputPage = () => {
  return (
    <div>
      <MDBInput
        label='Filled'
        filled
        type='checkbox'
        id='checkbox1'
        containerClass='mr-5'
      />
    </div>
  );
};

export default InputPage;

React Checkbox - API

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

Import statement

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

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

API Reference: Properties

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

Name Type Default Description Example
checked Boolean false Pre-selects checkbox/radio button when the page loads. <MDBInput checked />
className String Adds custom class to Input component <MDBInput className="myClass" />
containerClass String Adds custom class to wrapping div <MDBInput containerClass="wrapper" />
disabled Boolean false Disables input component <MDBInput disabled />
error String Sets the error message for the labels data-error attribute <MDBInput error="Whoops!" />
filled Boolean false Add filled-in style to checkbox/radio button <MDBInput type="checkbox" filled />
gap Boolean false Creates gap inside checkbox/radio button <MDBInput type="checkbox" gap />
group Boolean false Add .form-group class to the wrapping div <MDBInput group />
hint String Sets the placeholder for the Input <MDBInput hint="Placeholder" />
icon String Adds font-awesome icon <MDBInput icon="caret-right" />
iconBrand Boolean false Use this property to set brand icon (fab) <MDBInput icon="twitter" iconBrand />
iconClassName String Adds custom classes to icon element <MDBInput icon="envelope" iconClassName="customClass" />
iconLight Boolean false Use this property to set light icon (fal) <MDBInput icon="twitter" iconLight />
iconRegular Boolean false Use this property to set regular icon (far) <MDBInput icon="twitter" iconRegular />
indeterminate Boolean false Set indeterminate state <MDBInput indeterminate />
iconSize String Sets icon size <MDBInput icon="pencil-alt" size="5x" />
id String Required! Set the id of the input element <MDBInput id="myId" />
inputRef Function Allows to attach React Ref to the input component; accepts only Callback Ref <MDBInput inputRef={ref => this.myRef = ref } />
label String Add label to the component; you can attach jsx elements (f.e. links) <MDBInput label="My custom input" />
labelClass String Adds custom class to the label <MDBInput labelClass="labelCustomClass" />
size String Changes size of the component; available lg and sm <MDBInput size="sm" />
success String Sets the success message for the labels data-success attribute <MDBInput success="Yeah!" />
tag String input Changes default input tag <MDBInput tag="div" />
type String text The type of the input element <MDBInput type="checkbox" />
validate Boolean false Adds .validate class to the Input component <MDBInput validate />
value String The value of the input element (use with the controlled input) <MDBInput value="I am controlled" onChange={this.handleChange} />
valueDefault String The default value of the input (use with the uncontrolled input) <MDBInput valueDefault="I am uncontrolled" />

API Reference: Methods

The table below shows the methods which you can use with MDBInput component.

Name Parameters Description Example
getValue Method called on input change event; returns input value <MDBInput getValue={this.getValue} />
onBlur Method called on blur event, the blur event is raised when an element loses focus; returns event object <MDBInput onBlur={this.handleBlur} />
onChange Method called on change event; returns event object <MDBInput onChange={this.handleChange} />
onFocus Method called on focus event, the focus event is raised when the user sets focus on en element; returns event object <MDBInput onFocus={this.handleFocus} />
onInput Method called on input event; returns event object <MDBInput onInput={this.handleInput} />

React Checkbox - examples & customization

Quickly get a project started with any of our examples.

Checkbox color change 

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

const InputPage = () => {
  return (
    <div>
      {/* Teal example */}
      <MDBInput containerClass="form-check checkbox-teal" labelClass="form-check-label" label="Teal checkbox" type="checkbox"
        id="tealExample" checked />

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

export default InputPage;
.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 

import React from 'react';
import { MDBInput } from 'mdbreact';
import './index.css'

const InputPage = () => {
  return (
    <div>
      {/* Filled-in rounded example */}
      <MDBInput containerClass="form-check checkbox-rounded" labelClass="form-check-label" label="Filled-in rounded example"
        type="checkbox" className="checkbox-rounded" filled id="roundedExample" checked />
    </div>
  )
}

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