uiUI 组件系统
对比

单选框组

Radio Group

让用户从互斥选项中选择一个值。

交互预览实时预览
默认展示方式
每次只选择一项
使用代码安装指南 ↗
app.mjs
import { mount } from '@sofish/ui/browser';

const view = mount(
  document.querySelector('#example'),
  'radio'
);

view.element.addEventListener('ui:change', event => {
  console.log(event.detail.value);
});

// view.update({ ...nextProps });
// view.destroy();

什么时候用

选项不多,且需要同时看到差异。

什么时候不用

选项很多时考虑 Select;可独立勾选用 Checkbox。

COMPONENT API

属性与事件

传入业务数据,通过事件连接你的应用。

属性默认值
label"默认展示方式"
name""
options[{"value":"grid","label":"网格视图"},{"value":"list","label":"列表视图"}]
value"grid"
disabledfalse
multiplefalse

事件

ui:change

安装、生命周期与完整 API ↗

INTERACTION NOTES

交互与可访问性

  • 组标题说明选择问题。
  • 同组使用一致 name,并保留方向键行为。

和相似组件的区别

Radio 选一个持久值;按钮组也可能表示即时动作。

RESEARCH & ALTERNATIVES

官方实现映射

以下是上游生态对同类交互的实现。上方运行的是 UI 自己的组件。

Element PlusRadio
官方提供

包含 Radio 与 Radio Group。

关键状态

未选择已选择禁用无效

Vue / Nuxt · 来源核验

一起了解

复选框 ↗选项选择器 ↗分段选择与工具切换 ↗