React Bootstrap Checkbox and Radio
React Bootstrap checkbox, radio and switch examples for AdminKit: the .form-check markup in JSX, inline, disabled, toggle buttons and controlled checked state.
Checkboxes, radios and switches let people turn options on and off, or pick one choice out of a few. In AdminKit for React they are Bootstrap's .form-check markup in JSX, with no wrapper component. They are in the free and PRO versions of AdminKit for React. One React detail to know: set the starting state with defaultChecked, not checked.
Example
The <input> and its label are siblings in a .form-check, connected by id and htmlFor:
<div className="form-check">
<input className="form-check-input" type="checkbox" value="" id="checkDefault" />
<label className="form-check-label" htmlFor="checkDefault">Email me about new comments</label>
</div>
<div className="form-check">
<input className="form-check-input" type="checkbox" value="" id="checkChecked" defaultChecked />
<label className="form-check-label" htmlFor="checkChecked">Email me a weekly summary</label>
</div>The demo pages also use a shorter form that needs no ids. There, the .form-check is the <label> itself, and the text is a <span className="form-check-label">.
Classes
| Class | Element | Description |
|---|---|---|
form-check | wrapper | Lays out the input and its label |
form-check-input | <input> | The checkbox or radio |
form-check-label | <label>, <span> | The label text |
form-check-inline | .form-check | Puts the checks on one line |
form-switch | .form-check | Draws a checkbox as a switch |
btn-check | <input> | Hides the input; its .btn label becomes a toggle button |
Radios
Use radios when people pick exactly one option. Radios with the same name form a group: picking one clears the others.
<div className="form-check">
<input className="form-check-input" type="radio" name="plan" value="monthly" id="radioMonthly" defaultChecked />
<label className="form-check-label" htmlFor="radioMonthly">Monthly</label>
</div>
<div className="form-check">
<input className="form-check-input" type="radio" name="plan" value="yearly" id="radioYearly" />
<label className="form-check-label" htmlFor="radioYearly">Yearly</label>
</div>
<div className="form-check">
<input className="form-check-input" type="radio" name="plan" value="lifetime" id="radioLifetime" disabled />
<label className="form-check-label" htmlFor="radioLifetime">Lifetime</label>
</div>Inline
When there are only a few short options, put them on one line with form-check-inline on each .form-check.
<div className="form-check form-check-inline">
<input className="form-check-input" type="checkbox" value="small" id="inlineSmall" />
<label className="form-check-label" htmlFor="inlineSmall">Small</label>
</div>
<div className="form-check form-check-inline">
<input className="form-check-input" type="checkbox" value="medium" id="inlineMedium" />
<label className="form-check-label" htmlFor="inlineMedium">Medium</label>
</div>
<div className="form-check form-check-inline">
<input className="form-check-input" type="checkbox" value="large" id="inlineLarge" disabled />
<label className="form-check-label" htmlFor="inlineLarge">Large</label>
</div>Switches
A switch reads better than a checkbox for an on/off setting. It is a checkbox in a .form-check.form-switch:
<div className="form-check form-switch">
<input className="form-check-input" type="checkbox" id="switchDefault" />
<label className="form-check-label" htmlFor="switchDefault">Default switch checkbox input</label>
</div>
<div className="form-check form-switch">
<input className="form-check-input" type="checkbox" id="switchChecked" defaultChecked />
<label className="form-check-label" htmlFor="switchChecked">Checked switch checkbox input</label>
</div>
<div className="form-check form-switch">
<input className="form-check-input" type="checkbox" id="switchDisabled" disabled />
<label className="form-check-label" htmlFor="switchDisabled">Disabled switch checkbox input</label>
</div>Controlled toggle buttons
Sometimes other parts of the page have to follow a choice. Then keep the value in state with checked and onChange. This example is the billing period toggle of the Pricing page: two radios with .btn-check, drawn as a button group.
import { useState } from "react";
export function BillingPeriodToggle() {
const [period, setPeriod] = useState<"monthly" | "yearly">("monthly");
return (
<div className="btn-group" role="group" aria-label="Billing period">
<input
type="radio"
className="btn-check"
name="billing-period"
id="billingMonthly"
value="monthly"
autoComplete="off"
checked={period === "monthly"}
onChange={() => setPeriod("monthly")}
/>
<label className="btn btn-outline-primary" htmlFor="billingMonthly">Monthly</label>
<input
type="radio"
className="btn-check"
name="billing-period"
id="billingYearly"
value="yearly"
autoComplete="off"
checked={period === "yearly"}
onChange={() => setPeriod("yearly")}
/>
<label className="btn btn-outline-primary" htmlFor="billingYearly">Yearly</label>
</div>
);
}For a checkbox, read event.target.checked in onChange. A checked without onChange makes the input read-only, and React warns about it.
Accessibility
- Each check needs a label: a
<label htmlFor>that matches itsid, a wrapping<label>, oraria-labelwhen there is no text. - Group related radios or checkboxes in a
<fieldset>with a<legend>, or give the grouprole="group"and anaria-label, as the billing period toggle does. - A switch is still a checkbox for screen readers. Its label should say what is on, such as "Email notifications".
.btn-checkhides the input visually but keeps it focusable, so Tab and the arrow keys still reach the toggle buttons.
Related
- Next.js Bootstrap checkbox and radio: the same checks in AdminKit for Next.js
- Bootstrap 5 checkbox, radio and toggle switch: the checks of the HTML version
- Form layout: checks in horizontal and inline forms
- Basic Inputs demo
Last updated on
Select
React Select Bootstrap styling in AdminKit PRO: a searchable select and multiselect with option groups, next to the native form-select in JSX.
Input maskPro
A React input mask for AdminKit PRO: MaskedInput formats dates, amounts, license plates and IP addresses as you type, with Inputmask on an uncontrolled input.