DaisyUI Radio 组件完全指南类名体系、状态样式与源码实现解析【免费下载链接】daisyui The most popular, free and open-source Tailwind CSS component library项目地址: https://gitcode.com/GitHub_Trending/da/daisyuiRadio单选按钮是 DaisyUI 中面向原生表单交互的表单控件之一它允许用户在若干互斥选项中只选择一个。DaisyUI 的 Radio 组件以原生input typeradio为基础通过radio类名与主题色、尺寸修饰类组合出开箱即用的样式。本文将围绕 Radio 组件官方文档/components/radio/page.md) 的完整示例逐一讲解基础用法、五种尺寸、八种主题色、自定义颜色与禁用状态并结合 radio.css 源码深入剖析其尺寸变量、颜色变量与选中动画的底层实现帮助你写出既符合无障碍规范又能随主题整体缩放的单选按钮。为什么选择原生input typeradioDaisyUI 的组件页文档本身使用了标准的 HTML 表单控件每个 Radio 示例都是一个带name和classradio属性的原生 input。这样设计的好处在于键盘导航、方向键切换选项、表单序列化、disabled/checked语义等浏览器原生行为被完整保留无需引入 JavaScript 状态管理配合label或表单直接可用源码层面可确认组件的状态样式通过 CSS 伪类:checked驱动见 radio.css。注意文档同时强调页面上的每一组单选按钮都应使用唯一的name属性值以避免与其他组的 Radio 输入产生冲突这是 HTML Radio 互斥行为决定的——同一name下只能选中一项。基础用法radio 组件类基础形态只需一个类radio。input typeradio nameradio-1 classradio checkedchecked / input typeradio nameradio-1 classradio /上面两个输入框共享nameradio-1因此它们是同一组选项浏览器会保证二者至多选中一个。被标记checkedchecked的那一项默认处于选中状态。组件类名总览根据文档 frontmatter 元数据radio/page.md/components/radio/page.md#L6-L38)Radio 的类名体系分为三类分类类名说明componentradio基础 Radio 输入样式必需colorradio-neutral/radio-primary/radio-secondary/radio-accent对应语义色colorradio-success/radio-warning/radio-info/radio-error对应语义色sizeradio-xs/radio-sm/radio-md/radio-lg/radio-xl从小到大五种尺寸radio-md为默认写法上遵循 skills/daisyui/components/radio.md 中的规则修饰类MODIFIER是可选的一个尺寸类加一个颜色类可以同时叠加两者input typeradio name{name} classradio {MODIFIER} /尺寸体系radio-xs 到 radio-xl文档展示了五种由小到大的尺寸并且统一使用checkedchecked来高亮当前选中的缩放基准input typeradio nameradio-2 classradio radio-xs checkedchecked / input typeradio nameradio-2 classradio radio-sm checkedchecked / input typeradio nameradio-2 classradio radio-md checkedchecked / input typeradio nameradio-2 classradio radio-lg checkedchecked / input typeradio nameradio-2 classradio radio-xl checkedchecked /示例代码中的输入框共享同一个nameradio-2实际页面效果是五个不同尺寸的选中态样本若要在一个真实分组中仅保留一项选中请给每组分配独立name并按需放置checked。尺寸的底层原理--size-selector 变量与乘法缩放查看 radio.css 可以看到radio的基础尺寸由 CSS 变量计算而来而不是写死像素--size: calc(var(--size-selector, 0.25rem) * 6); width: var(--size); height: var(--size);也就是说默认 Radio 的直径 --size-selector × 6而--size-selector的兜底值是0.25rem由 Tailwind 主题扩展注入见 functions/variables.css。各尺寸修饰类只是重新指定乘数并微调内边距尺寸类padding--size计算默认值下的直径radio-xs0.125rem--size-selector × 41remradio-sm0.1875rem--size-selector × 51.25remradio-md默认0.25rem--size-selector × 61.5remradio-lg0.3125rem--size-selector × 71.75remradio-xl0.375rem--size-selector × 82rem相关实现见 radio.css。尺寸类的padding决定了内部空心圆点由::before填充的圆形内容区的半径随着--size增大内点与外环同步放大。通过主题变量全局缩放组件尺寸这并非 Radio 特有的硬编码而是 DaisyUI 的通用设计。在默认的 light 主题中 light.css 定义了--radius-selector: 0.5rem; --size-selector: 0.25rem; --depth: 1; --noise: 0;因此如果你想在某个应用里让所有表单控件radio、checkbox、badge 等整体变大或变小只需在自定义主题或:root中覆盖--size-selector的值所有依赖calc(var(--size-selector, 0.25rem) * N)的组件都会同步缩放——Radio 源码中全部五个尺寸类都基于该变量计算正是这一机制的实际体现。颜色体系语义色修饰类Radio 支持八种语义化颜色。每种颜色均可以呈现选中/未选中两种状态例如 Primary color 示例input typeradio nameradio-4 classradio radio-primary checkedchecked / input typeradio nameradio-4 classradio radio-primary /其余颜色用法完全一致仅替换类名后缀即可场景类名场景类名中性色radio-neutral成功radio-success主色radio-primary警告radio-warning次要色radio-secondary信息radio-info强调色radio-accent错误radio-error例如 Neutral 与 Accent 的完整写法input typeradio nameradio-3 classradio radio-neutral checkedchecked / input typeradio nameradio-3 classradio radio-neutral / input typeradio nameradio-6 classradio radio-accent checkedchecked / input typeradio nameradio-6 classradio radio-accent /颜色修饰类的实现本质--input-color 变量从源码 radio.css 可以看到每个颜色类实际只做一件事——设置一个 CSS 自定义属性.radio-primary { --input-color: var(--color-primary); } .radio-secondary{ --input-color: var(--color-secondary); } .radio-accent { --input-color: var(--color-accent); } .radio-neutral { --input-color: var(--color-neutral); } .radio-info { --input-color: var(--color-info); } .radio-success { --input-color: var(--color-success); } .radio-warning { --input-color: var(--color-warning); } .radio-error { --input-color: var(--color-error); }而基础radio类的环线颜色引用该变量并带有兜底值border: var(--border) solid var(--input-color, color-mix(in srgb, currentColor 20%, #0000));未选中时默认使用currentColor20% 透明混合出的浅色描边被:checked命中后radio.css控件切换到base-100背景、currentColor描边内点::before以currentColor填充并叠加基于--depth的阴影:checked { apply bg-base-100 border-current; :before { apply bg-current; box-shadow: 0 -1px oklch(0% 0 0 / calc(var(--depth) * 0.1)) inset, 0 8px 0 -4px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset, 0 1px oklch(0% 0 0 / calc(var(--depth) * 0.1)); } }因此不添加任何颜色修饰类时radio会使用继承的文字颜色currentColor想要跟随主题调色板配色就挂上对应的radio-*颜色类。它们读取的是主题色变量如--color-primary所以换肤light/dark/dim 等主题切换时 Radio 的颜色会自动保持一致。与之机制完全相同的是 Checkbox 组件其颜色与尺寸实现可对照 checkbox.css 理解。禁用状态给 Radio 添加原生disabled属性即可获得禁用外观同时浏览器会阻止其参与表单提交与键盘交互input typeradio nameradio-11 classradio disabled checkedchecked / input typeradio nameradio-11 classradio disabled /源码中的对应规则位于 radio.css.radio:disabled { apply cursor-not-allowed opacity-20; }即鼠标指针变为禁止图标、整体降为 20% 透明度。这里使用opacity-20而非直接换色是为了在任意主题色下都能保持可辨识的弱化观感同时避免覆盖用户自定义的颜色类。自定义颜色直接叠加 Tailwind 工具类如果你需要的配色不在上述八种语义色里文档示例表明可以直接在radio类上叠加任意 Tailwind 的颜色工具类覆盖对应层级的 CSS 变量与状态样式input typeradio nameradio-12 checkedchecked classradio bg-red-100 border-red-300 checked:bg-red-200 checked:text-red-600 checked:border-red-600 / input typeradio nameradio-12 checkedchecked classradio bg-blue-100 border-blue-300 checked:bg-blue-200 checked:text-blue-600 checked:border-blue-600 /其定制原理与上面的源码相互印证未选中时bg-*设置内部背景border-*覆盖默认的浅色环线对应基础规则中的border声明选中时:checkedchecked:bg-*覆盖选中态背景、checked:text-*让currentColor指向指定颜色内点::before的bg-current由此取色、checked:border-*覆盖描边。由于选中态渲染的关键正是currentColor与border-current的联动自定义颜色只需围绕text-*决定圆点颜色这一核心做文章即可实现任意品牌色。更多状态细节键盘焦点、无障碍与选中动画除了文档示例直接呈现的状态从源码还可以提取几个对无障碍与体验至关重要的细节1. 键盘焦点可见性。radio基础类声明了appearance-none并自定义了焦点样式:focus-visible { outline: 2px solid currentColor; }见 radio.css。当用户用 Tab 键把焦点移到单选钮上时会出现一圈currentColor的 2px 轮廓配合原生:focus-visible只在键盘导航时触发避免鼠标点击时出现多余的焦点圈。2. aria-checked 支持。源码中的选中态同时匹配:checked与[aria-checkedtrue]两种形式:checked, [aria-checkedtrue] { … }这意味着即使你基于roleradio自定义了非 input 的按钮式单选交互只要正确维护aria-checked属性就能复用整套 Radio 视觉状态。3. 选中弹入动画。在用户偏好非减弱动画prefers-reduced-motion: no-preference时选中会触发 0.2s 的radio关键帧动画radio.css 与 keyframes 定义keyframes radio { 0% { padding: 5px; } 50% { padding: 3px; } }动画通过短暂改变内边距模拟圆点弹入外环的轻快手感系统开启减弱动画prefers-reduced-motion: reduce时动画被跳过直接呈现最终状态。此外选中内点在forced-colors高对比度模式与打印场景下都有对应的轮廓兜底规则见 radio.css兼顾了高对比度主题与纸质输出。关于文档代码中的$$前缀占位符组件文档展示的 HTML 代码块中类名常写作$$radio、$$radio-primary等例如 radio/page.md/components/radio/page.md#L55-L58) 中的class$$radio。这是 DaisyUI 文档站点为前缀prefix模式准备的占位符当你通过daisyui.config的prefix选项给所有组件类添加自定义前缀如daisy-时页面上的$$radio会被替换成daisy-radio这样的实际类名。在自己项目中使用时请去掉$$按实际配置的类名书写如 skills/daisyui/components/radio.md 的语法示例所示input typeradio nameradio-1 classradio checkedchecked / input typeradio nameradio-1 classradio /小结DaisyUI 的 Radio 组件是一个轻修饰、重变量的表单控件视觉上由radio基础类配合原生:checked/:disabled/:focus-visible状态驱动配色通过radio-*颜色类注入--input-color变量接入整套主题调色板尺寸通过radio-*尺寸类改写--size-selector的乘数实现全局缩放。无论是需要随主题联动的小型表单还是希望统一控件体量的后台系统掌握这套类名组合与底层 CSS 变量即可不写一行自定义样式地完成从默认态、选中态、禁用态到自定义品牌色的全部需求。可继续阅读同一体系的其他表单组件实现加以对照checkbox.css、主题变量声明 variables.css以及 Radio 组件的可读速查技能文档 skills/daisyui/components/radio.md。【免费下载链接】daisyui The most popular, free and open-source Tailwind CSS component library项目地址: https://gitcode.com/GitHub_Trending/da/daisyui创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
