Checks & Radios

  1. Forms
  2. Form Elements
  3. Checks & Radios

Checkbox states

Default, checked, disabled and indeterminate styles.

Mixed state is set with the native indeterminate property. 
<div class="form-check mb-3">
                                    <input class="form-check-input" type="checkbox" id="check-default">
                                    <label class="form-check-label" for="check-default">Unchecked option</label>
                                </div>
                                <div class="form-check mb-3">
                                    <input class="form-check-input" type="checkbox" id="check-selected" checked>
                                    <label class="form-check-label" for="check-selected">Selected option</label>
                                </div>
                                <div class="form-check mb-3">
                                    <input class="form-check-input" type="checkbox" id="check-disabled" disabled>
                                    <label class="form-check-label" for="check-disabled">Disabled option</label>
                                </div>
                                <div class="form-check mb-3">
                                    <input class="form-check-input" type="checkbox" id="check-disabled-selected" checked disabled>
                                    <label class="form-check-label" for="check-disabled-selected">Disabled and selected</label>
                                </div>
                                <div class="form-check mb-0">
                                    <input class="form-check-input" type="checkbox" id="check-indeterminate">
                                    <label class="form-check-label" for="check-indeterminate">Parent selection (mixed)</label>
                                    <div class="form-text ms-4">Mixed state is set with the native indeterminate property.</div>
                                </div>

Checkbox layouts

Inline, reverse-aligned and nested selection examples.

Inline choices
Nested options 
<fieldset class="mb-4">
                                    <legend class="form-label">Inline choices</legend>
                                    <div class="d-flex flex-wrap gap-3">
                                        <div class="form-check form-check-inline"><input class="form-check-input" type="checkbox" id="inline-design" checked><label class="form-check-label" for="inline-design">Design</label></div>
                                        <div class="form-check form-check-inline"><input class="form-check-input" type="checkbox" id="inline-product"><label class="form-check-label" for="inline-product">Product</label></div>
                                        <div class="form-check form-check-inline"><input class="form-check-input" type="checkbox" id="inline-engineering"><label class="form-check-label" for="inline-engineering">Engineering</label></div>
                                    </div>
                                </fieldset>
                                <hr>
                                <div class="form-check form-check-reverse mb-3">
                                    <input class="form-check-input" type="checkbox" id="reverse-one" checked>
                                    <label class="form-check-label" for="reverse-one">Checkbox aligned to the right</label>
                                </div>
                                <div class="form-check form-check-reverse mb-4">
                                    <input class="form-check-input" type="checkbox" id="reverse-two">
                                    <label class="form-check-label" for="reverse-two">Another reverse option</label>
                                </div>
                                <fieldset>
                                    <legend class="form-label">Nested options</legend>
                                    <div class="form-check ms-3 mb-2"><input class="form-check-input" type="checkbox" id="nested-comments" checked><label class="form-check-label" for="nested-comments">Comments</label></div>
                                    <div class="form-check ms-3"><input class="form-check-input" type="checkbox" id="nested-files"><label class="form-check-label" for="nested-files">Files and attachments</label></div>
                                </fieldset>

Button-style checkboxes

Multi-select chips built with Bootstrap button checks.

Filter projects by team

Color variants

<p class="form-label">Filter projects by team</p>
                                <div class="d-flex flex-wrap gap-2">
                                    <input type="checkbox" class="btn-check" id="filter-design" autocomplete="off" checked>
                                    <label class="btn btn-outline-primary" for="filter-design">Design</label>
                                    <input type="checkbox" class="btn-check" id="filter-product" autocomplete="off">
                                    <label class="btn btn-outline-primary" for="filter-product">Product</label>
                                    <input type="checkbox" class="btn-check" id="filter-engineering" autocomplete="off">
                                    <label class="btn btn-outline-primary" for="filter-engineering">Engineering</label>
                                    <input type="checkbox" class="btn-check" id="filter-marketing" autocomplete="off">
                                    <label class="btn btn-outline-primary" for="filter-marketing">Marketing</label>
                                </div>
                                <hr class="my-4">
                                <p class="form-label">Color variants</p>
                                <div class="d-flex flex-wrap gap-2">
                                    <input type="checkbox" class="btn-check" id="variant-primary" autocomplete="off" checked>
                                    <label class="btn btn-primary" for="variant-primary">Primary</label>
                                    <input type="checkbox" class="btn-check" id="variant-success" autocomplete="off">
                                    <label class="btn btn-outline-success" for="variant-success">Success</label>
                                    <input type="checkbox" class="btn-check" id="variant-danger" autocomplete="off">
                                    <label class="btn btn-outline-danger" for="variant-danger">Danger</label>
                                </div>

Radio states and layouts

Single-choice controls, disabled states and inline radios.

Choose a project priority
Inline radio choices 
<fieldset class="mb-4">
                                    <legend class="form-label">Choose a project priority</legend>
                                    <div class="form-check mb-2"><input class="form-check-input" type="radio" name="priority" id="priority-low" value="low"><label class="form-check-label" for="priority-low">Low</label></div>
                                    <div class="form-check mb-2"><input class="form-check-input" type="radio" name="priority" id="priority-normal" value="normal" checked><label class="form-check-label" for="priority-normal">Normal</label></div>
                                    <div class="form-check"><input class="form-check-input" type="radio" name="priority" id="priority-high" value="high"><label class="form-check-label" for="priority-high">High</label></div>
                                </fieldset>
                                <hr>
                                <fieldset>
                                    <legend class="form-label">Inline radio choices</legend>
                                    <div class="d-flex flex-wrap gap-3">
                                        <div class="form-check form-check-inline"><input class="form-check-input" type="radio" name="view-mode" id="view-list" value="list" checked><label class="form-check-label" for="view-list">List</label></div>
                                        <div class="form-check form-check-inline"><input class="form-check-input" type="radio" name="view-mode" id="view-board" value="board"><label class="form-check-label" for="view-board">Board</label></div>
                                        <div class="form-check form-check-inline"><input class="form-check-input" type="radio" name="view-mode" id="view-calendar" value="calendar"><label class="form-check-label" for="view-calendar">Calendar</label></div>
                                    </div>
                                </fieldset>
                                <hr>
                                <div class="form-check mb-2">
                                    <input class="form-check-input" type="radio" name="disabled-choice" id="radio-disabled" disabled>
                                    <label class="form-check-label" for="radio-disabled">Disabled radio option</label>
                                </div>
                                <div class="form-check mb-0">
                                    <input class="form-check-input" type="radio" name="disabled-choice" id="radio-disabled-checked" checked disabled>
                                    <label class="form-check-label" for="radio-disabled-checked">Disabled selected option</label>
                                </div>

Checkbox and radio sizes

Scale the native controls for different layouts.

Checkbox sizes
Radio sizes 
<fieldset class="mb-4">
                                    <legend class="form-label">Checkbox sizes</legend>
                                    <div class="form-check fs-12 mb-2">
                                        <input class="form-check-input" type="checkbox" id="checkbox-size-small">
                                        <label class="form-check-label fs-13" for="checkbox-size-small">Small</label>
                                    </div>
                                    <div class="form-check mb-2">
                                        <input class="form-check-input" type="checkbox" id="checkbox-size-default" checked>
                                        <label class="form-check-label" for="checkbox-size-default">Default</label>
                                    </div>
                                    <div class="form-check fs-4 mb-0">
                                        <input class="form-check-input" type="checkbox" id="checkbox-size-large">
                                        <label class="form-check-label fs-13" for="checkbox-size-large">Large</label>
                                    </div>
                                </fieldset>
                                <hr>
                                <fieldset>
                                    <legend class="form-label">Radio sizes</legend>
                                    <div class="form-check fs-12 mb-2">
                                        <input class="form-check-input" type="radio" name="radio-size" id="radio-size-small">
                                        <label class="form-check-label fs-13" for="radio-size-small">Small</label>
                                    </div>
                                    <div class="form-check mb-2">
                                        <input class="form-check-input" type="radio" name="radio-size" id="radio-size-default" checked>
                                        <label class="form-check-label" for="radio-size-default">Default</label>
                                    </div>
                                    <div class="form-check fs-4 mb-0">
                                        <input class="form-check-input" type="radio" name="radio-size" id="radio-size-large">
                                        <label class="form-check-label fs-13" for="radio-size-large">Large</label>
                                    </div>
                                </fieldset>

Outline checkbox and radio styles

Outlined, solid and pill-shaped button controls.

Outline checkbox buttons
Outline radio buttons
Pill-style radio options 
<fieldset class="mb-4">
                                    <legend class="form-label">Outline checkbox buttons</legend>
                                    <div class="d-flex flex-wrap gap-2">
                                        <input type="checkbox" class="btn-check" id="outline-check-design" autocomplete="off" checked>
                                        <label class="btn btn-outline-primary" for="outline-check-design">Design</label>
                                        <input type="checkbox" class="btn-check" id="outline-check-build" autocomplete="off">
                                        <label class="btn btn-outline-secondary" for="outline-check-build">Build</label>
                                        <input type="checkbox" class="btn-check" id="outline-check-review" autocomplete="off">
                                        <label class="btn btn-outline-success" for="outline-check-review">Review</label>
                                    </div>
                                </fieldset>
                                <hr>
                                <fieldset class="mb-4">
                                    <legend class="form-label">Outline radio buttons</legend>
                                    <div class="btn-group" role="group" aria-label="Choose a project view">
                                        <input type="radio" class="btn-check" name="outline-view" id="outline-view-list" autocomplete="off" checked>
                                        <label class="btn btn-outline-primary" for="outline-view-list">List</label>
                                        <input type="radio" class="btn-check" name="outline-view" id="outline-view-board" autocomplete="off">
                                        <label class="btn btn-outline-primary" for="outline-view-board">Board</label>
                                        <input type="radio" class="btn-check" name="outline-view" id="outline-view-calendar" autocomplete="off">
                                        <label class="btn btn-outline-primary" for="outline-view-calendar">Calendar</label>
                                    </div>
                                </fieldset>
                                <fieldset>
                                    <legend class="form-label">Pill-style radio options</legend>
                                    <div class="d-flex flex-wrap gap-2">
                                        <input type="radio" class="btn-check" name="pill-priority" id="pill-priority-normal" autocomplete="off" checked>
                                        <label class="btn btn-outline-dark rounded-pill" for="pill-priority-normal">Normal</label>
                                        <input type="radio" class="btn-check" name="pill-priority" id="pill-priority-high" autocomplete="off">
                                        <label class="btn btn-outline-danger rounded-pill" for="pill-priority-high">High priority</label>
                                    </div>
                                </fieldset>

Button-style radio groups

Use exclusive choices for view and billing options.

Board density
Plan
Color style variants 
<fieldset class="mb-4">
                                    <legend class="form-label">Board density</legend>
                                    <div class="btn-group" role="group" aria-label="Board density">
                                        <input type="radio" class="btn-check" name="density" id="density-comfortable" autocomplete="off" checked>
                                        <label class="btn btn-outline-primary" for="density-comfortable">Comfortable</label>
                                        <input type="radio" class="btn-check" name="density" id="density-compact" autocomplete="off">
                                        <label class="btn btn-outline-primary" for="density-compact">Compact</label>
                                        <input type="radio" class="btn-check" name="density" id="density-spacious" autocomplete="off">
                                        <label class="btn btn-outline-primary" for="density-spacious">Spacious</label>
                                    </div>
                                </fieldset>
                                <fieldset>
                                    <legend class="form-label">Plan</legend>
                                    <div class="d-flex flex-wrap gap-2">
                                        <input type="radio" class="btn-check" name="plan" id="plan-monthly" autocomplete="off" checked>
                                        <label class="btn btn-outline-secondary" for="plan-monthly">Monthly</label>
                                        <input type="radio" class="btn-check" name="plan" id="plan-yearly" autocomplete="off">
                                        <label class="btn btn-outline-secondary" for="plan-yearly">Yearly</label>
                                    </div>
                                </fieldset>
                                <hr class="my-4">
                                <fieldset>
                                    <legend class="form-label">Color style variants</legend>
                                    <div class="d-flex flex-wrap gap-2">
                                        <input type="radio" class="btn-check" name="radio-color" id="radio-color-primary" autocomplete="off" checked>
                                        <label class="btn btn-outline-primary" for="radio-color-primary">Primary</label>
                                        <input type="radio" class="btn-check" name="radio-color" id="radio-color-success" autocomplete="off">
                                        <label class="btn btn-outline-success" for="radio-color-success">Success</label>
                                        <input type="radio" class="btn-check" name="radio-color" id="radio-color-danger" autocomplete="off">
                                        <label class="btn btn-outline-danger" for="radio-color-danger">Danger</label>
                                    </div>
                                </fieldset>

Bootstrap switches

Checkbox inputs presented as familiar on/off controls. 

<div class="form-check form-switch mb-3"><input class="form-check-input" type="checkbox" role="switch" id="switch-default"><label class="form-check-label" for="switch-default">Default switch</label></div>
                                <div class="form-check form-switch mb-3"><input class="form-check-input" type="checkbox" role="switch" id="switch-checked" checked><label class="form-check-label" for="switch-checked">Enabled switch</label></div>
                                <div class="form-check form-switch mb-3"><input class="form-check-input" type="checkbox" role="switch" id="switch-disabled" disabled><label class="form-check-label" for="switch-disabled">Disabled switch</label></div>
                                <div class="form-check form-switch mb-0"><input class="form-check-input" type="checkbox" role="switch" id="switch-disabled-checked" checked disabled><label class="form-check-label" for="switch-disabled-checked">Enabled and disabled switch</label></div>

Custom toggle switches

Project switch component in several sizes and colors.

Small · Primary
Default · Success
Large · Secondary 
<div class="d-flex align-items-center justify-content-between gap-3 mb-4">
                                    <span>Small · Primary</span>
                                    <div class="custom-toggle-switch toggle-sm">
                                        <input id="custom-switch-small" type="checkbox" checked>
                                        <label for="custom-switch-small" class="label-primary" aria-label="Small primary switch"></label>
                                    </div>
                                </div>
                                <div class="d-flex align-items-center justify-content-between gap-3 mb-4">
                                    <span>Default · Success</span>
                                    <div class="custom-toggle-switch">
                                        <input id="custom-switch-default" type="checkbox" checked>
                                        <label for="custom-switch-default" class="label-success" aria-label="Default success switch"></label>
                                    </div>
                                </div>
                                <div class="d-flex align-items-center justify-content-between gap-3">
                                    <span>Large · Secondary</span>
                                    <div class="custom-toggle-switch toggle-lg">
                                        <input id="custom-switch-large" type="checkbox">
                                        <label for="custom-switch-large" class="label-secondary" aria-label="Large secondary switch"></label>
                                    </div>
                                </div>

Theme checkboxes

Use existing project variants to emphasize selection.

Grouped selection

Select individual items or use the parent checkbox.

Checkbox buttons

Choose multiple tags independently.

Radio button group

Choose one view from a mutually exclusive group.

Radio choice cards

Select a workspace plan with supporting details.

Theme switches

Native switches with project color variants.

Settings switches

Compact preference rows with clear descriptions.

Save a daily copy of your workspace.

Receive a summary of recent activity.

Pause notifications outside working hours.

Required selection

Native validation checks a required checkbox and radio choice.

Contact preference