Radio

Radio input for mutually exclusive choices.

Introduction

Use radios when users must pick exactly one option from a short list. Group options by sharing the same name. For yes/no toggles that take effect immediately, Switch may be clearer; for multiple selections, use Checkbox. For a compact segmented track of labeled options, use Toggle Group.

Each Radio includes built-in label chrome. Arrow keys move selection within a native radio group in the browser.

Import

import { Radio } from "@bridge-ui/vue/Components/Radio";

import { Radio } from "@bridge-ui/react/Components/Radio";

Basic usage

Render multiple Radio components with the same name and distinct value props. In React, use checked and onChange for controlled state; in Vue, bind the same v-model to each radio in the group. For an initial selection without binding, use defaultChecked in React or default-checked in Vue.

Colors

Use the color prop to change the radio color. Available colors: primary, secondary, success, info, warning, error, dark, and black.

Sizes

Control the radio size with the size prop. Available sizes: 2xs, xs, sm, md (default), lg, xl, and 2xl.

Rounded

Use the rounded prop to control border radius. Available values: none, xs, sm, md, lg, xl, 2xl, 3xl, 4xl, and full (defaults vary by component).

Validation

Use required to mark the field as required, error with errorMessage for invalid state, and disabled to prevent interaction.

Related components

Checkbox, Label, Switch, Toggle Group

Accessibility

• Arrow keys move selection within a group that shares the same name
• Space selects the focused radio
• A visually hidden native <input type="radio"> holds state; the styled control has aria-hidden
• endLabel is associated with the input through matching id and htmlFor
• error sets aria-invalid on the input and data-invalid on the FormControl root
• disabled sets aria-disabled on the FormControl root

Anatomy

<div data-invalid>
  <div>
    <!-- row -->
    <label>
      <input type="radio" class="sr-only" name="group" value="a" />
      <span aria-hidden="true">
        <span />
        <!-- dot when checked -->
      </span>
    </label>
    <label for="...">Option A</label>
  </div>
  <!-- repeat for each option -->
  <p>Description</p>
  <p aria-hidden>Error message</p>
</div>

API