单选框 · Bootstrap 6.0 中文文档

基础无线电

类似于复选框，单选按钮使用 .radio 类进行样式化。然而，我们没有使用自定义 SVG，而是使用纯 CSS 来设置输入框及其选中状态的样式。

HTML

<input type="radio" id="radio" class="radio" />

带表单字段

将.radio包裹在.form-field布局容器中并添加你的标签。网格布局会将单选按钮和标签并排放置。

第一个示例收音机

第二个示例收音机

HTML

<div class="form-field">
  <input class="radio" name="radios" type="radio" id="radioLabel" />
  <label for="radioLabel">First example radio</label>
</div>
<div class="form-field">
  <input class="radio" name="radios" type="radio" id="radioLabel2" />
  <label for="radioLabel2">Second example radio</label>
</div>

描述

在标签后添加描述或其他内容。我们建议将标签和描述包含在.form-field-content中，以确保适当的间距和对齐。

示例新收音机上述标签的支持说明。

HTML

<div class="form-field">
  <input type="radio" id="radioLabelDescription" class="radio" />
  <div class="form-field-content">
    <label for="radioLabelDescription" class="fw-medium">Example new radio</label>
    <small class="form-text">Supporting description for the above label.</small>
  </div>
</div>

主题颜色

通过将 .theme-{color} 类添加到 .radio 元素，修改选中单选按钮的外观。这将把选中状态的背景色和边框颜色设置为主题色。

HTML

<div class="form-field">
  <input type="radio" id="radioprimary" class="radio theme-primary" checked />
  <label for="radioprimary">Example primary radio</label>
</div>
<div class="form-field">
  <input type="radio" id="radioaccent" class="radio theme-accent" checked />
  <label for="radioaccent">Example accent radio</label>
</div>
<div class="form-field">
  <input type="radio" id="radiosuccess" class="radio theme-success" checked />
  <label for="radiosuccess">Example success radio</label>
</div>
<div class="form-field">
  <input type="radio" id="radiodanger" class="radio theme-danger" checked />
  <label for="radiodanger">Example danger radio</label>
</div>
<div class="form-field">
  <input type="radio" id="radiowarning" class="radio theme-warning" checked />
  <label for="radiowarning">Example warning radio</label>
</div>
<div class="form-field">
  <input type="radio" id="radioinfo" class="radio theme-info" checked />
  <label for="radioinfo">Example info radio</label>
</div>
<div class="form-field">
  <input type="radio" id="radioinverse" class="radio theme-inverse" checked />
  <label for="radioinverse">Example inverse radio</label>
</div>
<div class="form-field">
  <input type="radio" id="radiosecondary" class="radio theme-secondary" checked />
  <label for="radiosecondary">Example secondary radio</label>
</div>

残疾

添加 disabled 属性后，相关的 <label> 会自动应用更浅的颜色样式，以帮助指示输入的状态。

示例新收音机

示例已选中且禁用的单选按钮

HTML

<div class="form-field">
  <input type="radio" id="radioDisabled" class="radio" disabled />
  <label for="radioDisabled">Example new radio</label>
</div>

<div class="form-field">
  <input type="radio" id="radioCheckedDisabled" class="radio" disabled checked />
  <label for="radioCheckedDisabled">Example checked disabled radio</label>
</div>

尺寸

添加 .radio-sm 或 .radio-lg 以使你的收音机看起来更小或更大。

小收音机

默认广播

大收音机

HTML

<div class="form-field">
  <input type="radio" id="radioSizeSm" class="radio radio-sm" checked />
  <label for="radioSizeSm">Small radio</label>
</div>
<div class="form-field">
  <input type="radio" id="radioSizeMd" class="radio" checked />
  <label for="radioSizeMd">Default radio</label>
</div>
<div class="form-field">
  <input type="radio" id="radioSizeLg" class="radio radio-lg" checked />
  <label for="radioSizeLg">Large radio</label>
</div>

CSS

变量

单选组件的 CSS 变量是基于 Sass 变量构建的。

scss/表单/_单选.scss

// stylelint-disable-next-line scss/dollar-variable-default
$radio-tokens: defaults(
  (
    --radio-size: 1.25rem,
    --radio-margin-block: .125rem,
    --radio-bg: var(--bg-body),
    --radio-border-color: var(--border-color),
    --radio-checked-bg: var(--control-checked-bg),
    --radio-checked-border-color: var(--control-checked-border-color),
    --radio-disabled-bg: var(--control-disabled-bg),
    --radio-disabled-opacity: var(--control-disabled-opacity),
  ),
  $radio-tokens
);