CSS: radio-input-group

.instui-radio-input-group — 单选的 <fieldset>，可为普通样式或作为连接的分段切换器。

在单个单选按钮之间设置其自身的 gap；链式使用 -gap-* 间距实用修饰符将覆盖该内置值。

Source: radio-input-group.css

无障碍

呈现原生的 <fieldset>，并使用命名组的 <legend>；子单选按钮共享同一个 name，因此一次只能选中一个。

用法

@import "@pantoken/components/components.css";
@import "@pantoken/components/radio-input-group.css";

示例

<fieldset class="instui-radio-input-group">
  <legend>T-shirt size</legend>
  <label class="instui-radio"><input type="radio" name="size" checked> Small</label>
  <label class="instui-radio"><input type="radio" name="size"> Medium</label>
  <label class="instui-radio"><input type="radio" name="size"> Large</label>
</fieldset>

Toggle variant

<fieldset class="instui-radio-input-group -variant-toggle">
  <legend>T-shirt size</legend>
  <label class="instui-radio -variant-toggle"><input type="radio" name="size" checked> Small</label>
  <label class="instui-radio -variant-toggle"><input type="radio" name="size"> Medium</label>
  <label class="instui-radio -variant-toggle"><input type="radio" name="size"> Large</label>
</fieldset>

结构

.instui-radio-input-group.-variant-toggle
  legend
  radio (component)
    input

flowchart TD n0[".instui-radio-input-group.-variant-toggle"]:::cssdoc-root n1("legend"):::cssdoc-part n2(["radio"]):::cssdoc-component n3("input"):::cssdoc-part n0 --> n1 n2 --> n3 n0 --> n2 click n2 "/api/css/radio.md" classDef cssdoc-root stroke-width:1px; classDef cssdoc-part stroke-width:1px; classDef cssdoc-slot stroke-width:1px; classDef cssdoc-component stroke-width:1px;

修饰符

修饰符	描述
.-layout-columns	将单选按钮按列布局。
.-layout-inline	将单选按钮以内联方式布局。
.-required	将该组标记为必填。
.-variant-toggle	将子切换项布局为分段控件（仅所选分段填充）。

伪元素

伪元素	描述
::after	当组为必填时，在图例文本之后渲染装饰性必填字段星号。

消耗代币

Token	类型	值
--instui-component-form-field-layout-asterisk-color	<color>	LightDarklight-dark(#CF1F24, #FA917F)
--instui-component-form-field-layout-font-family	[ <font-family-name> | <generic-font-family> ]#	Atkinson Hyperlegible Next, "Helvetica Neue", Helvetica, Arial, sans-serif
--instui-component-form-field-layout-font-size	<length>	1rem
--instui-component-form-field-layout-font-weight	<integer>	400
--instui-component-form-field-layout-gap-inputs	<length>	0.75rem
--instui-component-form-field-layout-gap-primitives	<length>	0.5rem
--instui-component-form-field-layout-line-height	<length>	1.125rem
--instui-component-form-field-layout-text-color	<color>	LightDarklight-dark(#273540, #ffffff)
--instui-spacing-space-md	<length>	0.75rem

子组件

• radio

相关

• radio — 本组收集的单个控件。
• form-field-group — 用于分组和布局字段的一般包装器。