Skip to component content

Radio Group

Let users choose one option from a related set using native Bootstrap radio controls.

Radio Group
Use for one required choice from a related set.
Selected by default when it is the safest common choice.
Available when the user needs a different value.

Usage

Use .form-check radio inputs when one and only one option can be selected from a related set. Group the native radio inputs with a fieldset and legend, give every option a distinct visible label, and share the same name so the browser enforces a single selected value.

Use .form-check, .form-check-input, and .form-check-label for each option so label clicks and Bootstrap state styling work predictably. Add option descriptions only when they explain the consequence of choosing that value, and keep the selected default to the safest or most common choice.

Use disabled state for unavailable options without removing them when their presence helps explain the rule. Mark invalid state on the group when the user must choose before submitting, then make the validation message describe the required decision.

Default

Use one compact set of mutually exclusive options for a common selection workflow.

Radio Group
Incident alert channel
Choose how you want to be notified when an incident occurs.
<fieldset class="field-fieldset">
  <legend class="field-legend">Incident alert channel</legend>
  <div class="field-description form-text">Choose how you want to be notified when an incident occurs.</div>
  <div class="field">
    <div class="form-check">
      <input class="form-check-input" type="radio" name="radio-default" id="radio-default-email" checked>
      <label class="form-check-label" for="radio-default-email">Email</label>
    </div>
    <div class="form-check">
      <input class="form-check-input" type="radio" name="radio-default" id="radio-default-sms">
      <label class="form-check-label" for="radio-default-sms">SMS</label>
    </div>
    <div class="form-check">
      <input class="form-check-input" type="radio" name="radio-default" id="radio-default-webhook">
      <label class="form-check-label" for="radio-default-webhook">Webhook</label>
    </div>
  </div>
</fieldset>

Description

Show option-level helper text when each choice has a different operational impact.

Radio Group
Export destination
Each option explains its own operational impact below.
Saves to the operations drive folder.
Available for scheduled sync jobs only.
<fieldset class="field-fieldset">
  <legend class="field-legend">Export destination</legend>
  <div class="field-description form-text">Each option explains its own operational impact below.</div>
  <div class="field">
    <div class="form-check">
      <input class="form-check-input" type="radio" name="radio-format" id="radio-format-drive" checked aria-describedby="radio-format-drive-description">
      <label class="form-check-label" for="radio-format-drive">Shared drive</label>
      <div class="form-text" id="radio-format-drive-description">Saves to the operations drive folder.</div>
    </div>
    <div class="form-check">
      <input class="form-check-input" type="radio" name="radio-format" id="radio-format-sftp" aria-describedby="radio-format-sftp-description">
      <label class="form-check-label" for="radio-format-sftp">SFTP</label>
      <div class="form-text" id="radio-format-sftp-description">Available for scheduled sync jobs only.</div>
    </div>
  </div>
</fieldset>

Choice Card

Make the whole card clickable while keeping the native radio visible at the trailing edge.

Radio Group
Subscription plan 
<div class="field">
  <fieldset class="radio-group">
    <legend class="form-label">Subscription plan</legend>
    <div class="form-check form-check-card">
      <input class="form-check-input" type="radio" name="radio-plan-cards" id="radio-plan-plus" value="plus" checked aria-labelledby="radio-plan-plus-label" aria-describedby="radio-plan-plus-description">
      <label class="form-check-label" for="radio-plan-plus">
        <span class="form-check-card-content">
          <span class="form-check-card-title" id="radio-plan-plus-label">Plus</span>
          <span class="form-text" id="radio-plan-plus-description">For individuals and small teams.</span>
        </span>
      </label>
    </div>
    <div class="form-check form-check-card">
      <input class="form-check-input" type="radio" name="radio-plan-cards" id="radio-plan-pro" value="pro" aria-labelledby="radio-plan-pro-label" aria-describedby="radio-plan-pro-description">
      <label class="form-check-label" for="radio-plan-pro">
        <span class="form-check-card-content">
          <span class="form-check-card-title" id="radio-plan-pro-label">Pro</span>
          <span class="form-text" id="radio-plan-pro-description">For growing businesses.</span>
        </span>
      </label>
    </div>
    <div class="form-check form-check-card">
      <input class="form-check-input" type="radio" name="radio-plan-cards" id="radio-plan-enterprise" value="enterprise" aria-labelledby="radio-plan-enterprise-label" aria-describedby="radio-plan-enterprise-description">
      <label class="form-check-label" for="radio-plan-enterprise">
        <span class="form-check-card-content">
          <span class="form-check-card-title" id="radio-plan-enterprise-label">Enterprise</span>
          <span class="form-text" id="radio-plan-enterprise-description">For large teams and enterprises.</span>
        </span>
      </label>
    </div>
  </fieldset>
</div>

Choice Card with Icon

Add a Lucide icon in a square frame beside the label and description. Selected frames use the theme's primary background and foreground. Unavailable cards retain native disabled behavior.

Radio Group
Workspace location 
<div class="field">
  <fieldset class="radio-group">
    <legend class="form-label">Workspace location</legend>
    <div class="form-check form-check-card">
      <input class="form-check-input" type="radio" name="radio-workspace-cards" id="radio-workspace-cloud" value="cloud" checked aria-labelledby="radio-workspace-cloud-label" aria-describedby="radio-workspace-cloud-description">
      <label class="form-check-label" for="radio-workspace-cloud">
        <span class="form-check-card-media" aria-hidden="true">
          <i class="lucide lucide-cloud" data-icon="inline-start" aria-hidden="true"></i>
        </span>
        <span class="form-check-card-content">
          <span class="form-check-card-title" id="radio-workspace-cloud-label">Cloud workspace</span>
          <span class="form-text" id="radio-workspace-cloud-description">Work together from any device.</span>
        </span>
      </label>
    </div>
    <div class="form-check form-check-card">
      <input class="form-check-input" type="radio" name="radio-workspace-cards" id="radio-workspace-local" value="local" aria-labelledby="radio-workspace-local-label" aria-describedby="radio-workspace-local-description">
      <label class="form-check-label" for="radio-workspace-local">
        <span class="form-check-card-media" aria-hidden="true">
          <i class="lucide lucide-folder-open" data-icon="inline-start" aria-hidden="true"></i>
        </span>
        <span class="form-check-card-content">
          <span class="form-check-card-title" id="radio-workspace-local-label">Local workspace</span>
          <span class="form-text" id="radio-workspace-local-description">Keep files on this device.</span>
        </span>
      </label>
    </div>
    <div class="form-check form-check-card">
      <input class="form-check-input" type="radio" name="radio-workspace-cards" id="radio-workspace-managed" value="managed" disabled aria-labelledby="radio-workspace-managed-label" aria-describedby="radio-workspace-managed-description">
      <label class="form-check-label" for="radio-workspace-managed">
        <span class="form-check-card-media" aria-hidden="true">
          <i class="lucide lucide-building-2" data-icon="inline-start" aria-hidden="true"></i>
        </span>
        <span class="form-check-card-content">
          <span class="form-check-card-title" id="radio-workspace-managed-label">Managed workspace</span>
          <span class="form-text" id="radio-workspace-managed-description">Available with an organization plan.</span>
        </span>
      </label>
    </div>
  </fieldset>
</div>

Choice Card with Code

Replace the icon with one to three letters; codes are displayed in uppercase. Selected code frames use the theme's primary background and foreground. Set show_control=false to hide the radio visually while retaining native keyboard selection. The square matches a two-line text block; longer labels wrap independently.

Radio Group
Project category 
<div class="field">
  <fieldset class="radio-group">
    <legend class="form-label">Project category</legend>
    <div class="form-check form-check-card form-check-card--no-control">
      <input class="form-check-input visually-hidden" type="radio" name="radio-category-cards" id="radio-category-acs" value="acs" checked required aria-labelledby="radio-category-acs-label" aria-describedby="radio-category-acs-description">
      <label class="form-check-label" for="radio-category-acs">
        <span class="form-check-card-media" aria-hidden="true">
          <span>ACS</span>
        </span>
        <span class="form-check-card-content">
          <span class="form-check-card-title" id="radio-category-acs-label">AI &amp; Computer Science</span>
          <span class="form-text" id="radio-category-acs-description">Up to 3 students</span>
        </span>
      </label>
    </div>
    <div class="form-check form-check-card form-check-card--no-control">
      <input class="form-check-input visually-hidden" type="radio" name="radio-category-cards" id="radio-category-art" value="art" required aria-labelledby="radio-category-art-label" aria-describedby="radio-category-art-description">
      <label class="form-check-label" for="radio-category-art">
        <span class="form-check-card-media" aria-hidden="true">
          <span>ART</span>
        </span>
        <span class="form-check-card-content">
          <span class="form-check-card-title" id="radio-category-art-label">Art &amp; Digital Design</span>
          <span class="form-text" id="radio-category-art-description">Up to 1 student</span>
        </span>
      </label>
    </div>
    <div class="form-check form-check-card form-check-card--no-control">
      <input class="form-check-input visually-hidden" type="radio" name="radio-category-cards" id="radio-category-eme" value="eme" required aria-labelledby="radio-category-eme-label" aria-describedby="radio-category-eme-description">
      <label class="form-check-label" for="radio-category-eme">
        <span class="form-check-card-media" aria-hidden="true">
          <span>EME</span>
        </span>
        <span class="form-check-card-content">
          <span class="form-check-card-title" id="radio-category-eme-label">Engineering &amp; Mathematics, Energy – Physics</span>
          <span class="form-text" id="radio-category-eme-description">Up to 3 students</span>
        </span>
      </label>
    </div>
  </fieldset>
</div>

Fieldset

Add a fieldset-level description and standard field spacing when the whole group needs shared context.

Radio Group
Backup retention plan
Longer retention windows use more storage and cost more per month.
<fieldset class="field-fieldset">
  <legend class="field-legend">Backup retention plan</legend>
  <div class="field-description form-text">Longer retention windows use more storage and cost more per month.</div>
  <div class="field">
    <div class="form-check">
      <input class="form-check-input" type="radio" name="radio-retention" id="radio-retention-standard" checked>
      <label class="form-check-label" for="radio-retention-standard">Standard (30 days)</label>
    </div>
    <div class="form-check">
      <input class="form-check-input" type="radio" name="radio-retention" id="radio-retention-extended">
      <label class="form-check-label" for="radio-retention-extended">Extended (180 days)</label>
    </div>
    <div class="form-check">
      <input class="form-check-input" type="radio" name="radio-retention" id="radio-retention-archive">
      <label class="form-check-label" for="radio-retention-archive">Archive (7 years)</label>
    </div>
  </div>
</fieldset>

Disabled

Disable only options that are currently unavailable in the current environment.

Radio Group
Task completion notification
Some delivery methods may be temporarily unavailable.
<fieldset class="field-fieldset">
  <legend class="field-legend">Task completion notification</legend>
  <div class="field-description form-text">Some delivery methods may be temporarily unavailable.</div>
  <div class="field">
    <div class="form-check">
      <input class="form-check-input" type="radio" name="radio-disabled" id="radio-disabled-portal" checked>
      <label class="form-check-label" for="radio-disabled-portal">Team portal</label>
    </div>
    <div class="form-check">
      <input class="form-check-input" type="radio" name="radio-disabled" id="radio-disabled-mobile" disabled>
      <label class="form-check-label" for="radio-disabled-mobile">Mobile push (temporarily paused)</label>
    </div>
  </div>
</fieldset>

Invalid

Use the invalid and feedback parameters to show a validation error across the whole group.

Radio Group
Primary contact method
Choose how we should reach you if there's an issue.
Select a contact method before saving.
<fieldset class="field-fieldset">
  <legend class="field-legend">Primary contact method</legend>
  <div class="field-description form-text">Choose how we should reach you if there&#39;s an issue.</div>
  <div class="field">
    <div class="form-check">
      <input class="form-check-input is-invalid" type="radio" name="radio-invalid" id="radio-invalid-email" required aria-invalid="true" aria-describedby="radio-invalid-feedback">
      <label class="form-check-label" for="radio-invalid-email">Email</label>
    </div>
    <div class="form-check">
      <input class="form-check-input is-invalid" type="radio" name="radio-invalid" id="radio-invalid-sms" required aria-invalid="true" aria-describedby="radio-invalid-feedback">
      <label class="form-check-label" for="radio-invalid-sms">SMS</label>
    </div>
    <div class="form-check">
      <input class="form-check-input is-invalid" type="radio" name="radio-invalid" id="radio-invalid-phone" required aria-invalid="true" aria-describedby="radio-invalid-feedback">
      <label class="form-check-label" for="radio-invalid-phone">Phone call</label>
    </div>
    <div class="invalid-feedback d-block" id="radio-invalid-feedback">Select a contact method before saving.</div>
  </div>
</fieldset>

RTL

Choose the same notification channel across Arabic and Hebrew RTL examples, with English as the LTR comparison.

قناة التنبيه
يوضح كل خيار متى يصل التنبيه إلى الفريق.
يرسل ملخص الحالة إلى صندوق الوارد.
مناسب للتنبيهات التي تحتاج ردًا سريعًا.
<div dir="rtl">
  <fieldset class="field-fieldset">
    <legend class="field-legend">قناة التنبيه</legend>
    <div class="field-description form-text">يوضح كل خيار متى يصل التنبيه إلى الفريق.</div>
    <div class="field">
      <div class="form-check form-check-reverse">
        <input class="form-check-input" type="radio" name="radio-rtl-channel-arabic" id="radio-rtl-email-arabic" checked aria-describedby="radio-rtl-email-arabic-description">
        <label class="form-check-label" for="radio-rtl-email-arabic">بريد الفريق</label>
        <div class="form-text" id="radio-rtl-email-arabic-description">يرسل ملخص الحالة إلى صندوق الوارد.</div>
      </div>
      <div class="form-check form-check-reverse">
        <input class="form-check-input" type="radio" name="radio-rtl-channel-arabic" id="radio-rtl-sms-arabic" aria-describedby="radio-rtl-sms-arabic-description">
        <label class="form-check-label" for="radio-rtl-sms-arabic">تنبيه SMS</label>
        <div class="form-text" id="radio-rtl-sms-arabic-description">مناسب للتنبيهات التي تحتاج ردًا سريعًا.</div>
      </div>
    </div>
  </fieldset>
</div>
ערוץ התראות
כל אפשרות מסבירה מתי ההתראה מגיעה לצוות.
שולח סיכום מצב לתיבת הדואר.
מתאים להתראות שדורשות תגובה מהירה.
<div dir="rtl">
  <fieldset class="field-fieldset">
    <legend class="field-legend">ערוץ התראות</legend>
    <div class="field-description form-text">כל אפשרות מסבירה מתי ההתראה מגיעה לצוות.</div>
    <div class="field">
      <div class="form-check form-check-reverse">
        <input class="form-check-input" type="radio" name="radio-rtl-channel-hebrew" id="radio-rtl-email-hebrew" checked aria-describedby="radio-rtl-email-hebrew-description">
        <label class="form-check-label" for="radio-rtl-email-hebrew">דוא״ל צוות</label>
        <div class="form-text" id="radio-rtl-email-hebrew-description">שולח סיכום מצב לתיבת הדואר.</div>
      </div>
      <div class="form-check form-check-reverse">
        <input class="form-check-input" type="radio" name="radio-rtl-channel-hebrew" id="radio-rtl-sms-hebrew" aria-describedby="radio-rtl-sms-hebrew-description">
        <label class="form-check-label" for="radio-rtl-sms-hebrew">הודעת SMS</label>
        <div class="form-text" id="radio-rtl-sms-hebrew-description">מתאים להתראות שדורשות תגובה מהירה.</div>
      </div>
    </div>
  </fieldset>
</div>
Alert channel
Each option explains when the alert reaches the team.
Sends the status summary to the inbox.
Useful for alerts that need a quick response.
<div dir="ltr">
  <fieldset class="field-fieldset">
    <legend class="field-legend">Alert channel</legend>
    <div class="field-description form-text">Each option explains when the alert reaches the team.</div>
    <div class="field">
      <div class="form-check">
        <input class="form-check-input" type="radio" name="radio-rtl-channel-english" id="radio-rtl-email-english" checked aria-describedby="radio-rtl-email-english-description">
        <label class="form-check-label" for="radio-rtl-email-english">Team email</label>
        <div class="form-text" id="radio-rtl-email-english-description">Sends the status summary to the inbox.</div>
      </div>
      <div class="form-check">
        <input class="form-check-input" type="radio" name="radio-rtl-channel-english" id="radio-rtl-sms-english" aria-describedby="radio-rtl-sms-english-description">
        <label class="form-check-label" for="radio-rtl-sms-english">SMS alert</label>
        <div class="form-text" id="radio-rtl-sms-english-description">Useful for alerts that need a quick response.</div>
      </div>
    </div>
  </fieldset>
</div>

Component reference

Status
Accepted
Runtime
native HTML/CSS
Markup
Moo UI documented extension
Reference

For Bootstrap's source behavior and the shared form-check family, see the Bootstrap Checks and radios documentation.

Pages
Home Introduction Installation Layout Examples Account Appearance FAQ Forgot Password Overview Pricing Profile Sign In Sign Up Tasks Users Components Blocks Charts Utilities Support & Evidence Contributing AI Usage Changelog License
Components
Accordion Alert Alert Dialog Avatar Badge Breadcrumb Button Button Group Card Chart Checkbox Close Button Collapsible Combobox Context Menu Data Table Date Picker Dialog Dropdown Menu Empty Field Form Input Input Group Kbd Menubar Native Select Navigation Pagination Popover Progress Radio Group Separator Sheet Sidebar Skeleton Slider Spinner Switch Table Table of Contents Tabs Textarea Toast Toggle Group Tooltip Typography
Utilities
Border Scroll Fade
Blocks
Accordion Panels Sidebar (Floating) Sidebar (Inset)
↵ Go to Page

Settings

Theme
Choose how Moo UI looks on this device.
Sidebar
Choose how the sidebar sits on the page.
Theme Builder
Tune catalog tokens and chart colors for this browser.
Base color
Theme color
Chart color
Heading font
Body font
Radius
Direction
Choose the reading direction. RTL flips the layout live.
Reset

Restore the default appearance.