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

      • 单选组

      Live previewHTML · CSS · JavaScript

      用途

      Include CSS

      导入 Tailwind 和一个完整的 A3S UI 样式包。

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

      或者仅导入基本 CSS、Radio Group 组件 CSS 和一个样式包。

      @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 在更丰富的示例中使用 Radio 样式并组合 Field 样式。

      使用CDN或批量程序导入？请参见安装页。

      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" />

      示例

      说明

      使用 Field 组件进行单选组项目及其描述。

      Live previewHTML · CSS · JavaScript

      Standard spacing for most use cases.

      More space between elements.

      Minimal spacing for dense layouts.

      选择卡

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

      Live previewHTML · CSS · JavaScript

      现场组

      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 属性禁用单个项目。

      Live previewHTML · CSS · JavaScript

      无效

      在无线电输入上使用 aria-invalid="true"，在字段上使用 data-invalid 以显示验证错误。

      Live previewHTML · CSS · JavaScript
      Notification Preferences

      Choose how you want to receive notifications.

      RTL

      在无线电组或祖先上设置 dir="rtl"。

      Live previewHTML · CSS · JavaScript

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

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

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