# 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](/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`:

```html
<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="checkDefault">
  <label class="form-check-label" for="checkDefault">Email me about new comments</label>
</div>
<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="checkChecked" checked>
  <label class="form-check-label" for="checkChecked">Email me a weekly summary</label>
</div>
```
```tsx code
<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 class="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.

```html
<div class="form-check">
  <input class="form-check-input" type="radio" name="plan" value="monthly" id="radioMonthly" checked>
  <label class="form-check-label" for="radioMonthly">Monthly</label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="plan" value="yearly" id="radioYearly">
  <label class="form-check-label" for="radioYearly">Yearly</label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="plan" value="lifetime" id="radioLifetime" disabled>
  <label class="form-check-label" for="radioLifetime">Lifetime</label>
</div>
```
```tsx code
<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`.

```html
<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" value="small" id="inlineSmall">
  <label class="form-check-label" for="inlineSmall">Small</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" value="medium" id="inlineMedium">
  <label class="form-check-label" for="inlineMedium">Medium</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" value="large" id="inlineLarge" disabled>
  <label class="form-check-label" for="inlineLarge">Large</label>
</div>
```
```tsx code
<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`:

```html
<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" id="switchDefault">
  <label class="form-check-label" for="switchDefault">Default switch checkbox input</label>
</div>
<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" id="switchChecked" checked>
  <label class="form-check-label" for="switchChecked">Checked switch checkbox input</label>
</div>
<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" id="switchDisabled" disabled>
  <label class="form-check-label" for="switchDisabled">Disabled switch checkbox input</label>
</div>
```
```tsx code
<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.

```html
<div class="btn-group" role="group" aria-label="Billing period">
  <input type="radio" class="btn-check" name="billing-period" id="billingMonthly" value="monthly" autocomplete="off" checked>
  <label class="btn btn-outline-primary" for="billingMonthly">Monthly</label>
  <input type="radio" class="btn-check" name="billing-period" id="billingYearly" value="yearly" autocomplete="off">
  <label class="btn btn-outline-primary" for="billingYearly">Yearly</label>
</div>
```
```tsx code
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 its `id`, a wrapping `<label>`, or `aria-label` when there is no text.
- Group related radios or checkboxes in a `<fieldset>` with a `<legend>`, or give the group `role="group"` and an `aria-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-check` hides 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](/nextjs/docs/forms/checkbox-radio/): the same checks in AdminKit for Next.js
- [Bootstrap 5 checkbox](/bootstrap/docs/forms/checkbox/), [radio](/bootstrap/docs/forms/radio/) and [toggle switch](/bootstrap/docs/forms/toggle-switch/): the checks of the HTML version
- [Form layout](/react/docs/forms/layout/): checks in horizontal and inline forms
- [Basic Inputs demo](https://react-demo.adminkit.io/forms-basic-inputs)

---

Canonical HTML page: https://adminkit.io/react/docs/forms/checkbox-radio/

Site overview for agents: https://adminkit.io/llms.txt (expanded: https://adminkit.io/llms-full.txt) · Documentation: https://adminkit.io/bootstrap/docs/ · Questions: support@adminkit.io