For AI agents: the complete documentation index is available at https://a3s-lab.github.io/UI/en/llms.txt, the full documentation bundle is available at https://a3s-lab.github.io/UI/en/llms-full.txt, and this page is available as Markdown at https://a3s-lab.github.io/UI/en/components/radio-group.md.
A3S UI
  • English
  • next

      • Radio Group

      Live previewHTML · CSS · JavaScript

      Usage

      Include CSS

      Import Tailwind and one full A3S UI style bundle.

      @import "tailwindcss";
@import "@a3s-lab/ui/a3s.css";

      Or import only the base CSS, Radio Group component CSS, and one style pack.

      @import "tailwindcss";
@import "@a3s-lab/ui/base.css";
@import "@a3s-lab/ui/components/field.css";
@import "@a3s-lab/ui/components/radio.css";
@import "@a3s-lab/ui/styles/a3s.css";

      Radio Group uses Radio styles and composes Field styles in the richer examples.

      Using CDN or bundler imports? See the Installation page.

      Add your radio group HTML

      Add class="input" to radio inputs. Use a shared name attribute for mutually exclusive options, and wrap related options in a semantic <fieldset> or an element with role="radiogroup".

      <input type="radio" name="plan" class="input" />

      Examples

      Description

      Radio group items with a description using the Field component.

      Live previewHTML · CSS · JavaScript

      Standard spacing for most use cases.

      More space between elements.

      Minimal spacing for dense layouts.

      Choice Card

      Use a native <label> to wrap the entire .field for a clickable card-style selection.

      Live previewHTML · CSS · JavaScript

      Fieldset

      Use a native <fieldset> and <legend> to group radio items with a label and description.

      Live previewHTML · CSS · JavaScript
      Subscription Plan

      Yearly and lifetime plans offer significant savings.

      Disabled

      Use the disabled attribute to disable individual items.

      Live previewHTML · CSS · JavaScript

      Invalid

      Use aria-invalid="true" on radio inputs and data-invalid on fields to show validation errors.

      Live previewHTML · CSS · JavaScript
      Notification Preferences

      Choose how you want to receive notifications.

      RTL

      Set dir="rtl" on the radio group or an ancestor.

      Live previewHTML · CSS · JavaScript

      تباعد قياسي لمعظم حالات الاستخدام.

      مساحة أكبر بين العناصر.

      تباعد أدنى للتخطيطات الكثيفة.