- checkboxClass/radioClass(accent-cinnabar + 统一焦点环)+ 同名测试 - Checkbox/Radio 原子件:无 label 只渲染受控原生 input 便于就地替换 - 采用:ChainStarter 链类型单选、GeneratorRunner 入库勾选、CharacterCardItem 角色勾选
21 lines
737 B
TypeScript
21 lines
737 B
TypeScript
import type { InputHTMLAttributes, ReactNode } from "react";
|
||
|
||
import { radioClass } from "@/lib/ui/variants";
|
||
|
||
interface RadioProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type"> {
|
||
label?: ReactNode;
|
||
}
|
||
|
||
// 单选钮:无 label 时只渲染受控原生 input(供已有 <label>/布局包裹的调用点直接替换);
|
||
// 有 label 时自带 <label> 包裹,保留原生键盘/读屏语义。
|
||
export function Radio({ label, className, ...props }: RadioProps) {
|
||
const input = <input type="radio" className={radioClass(className)} {...props} />;
|
||
if (!label) return input;
|
||
return (
|
||
<label className="inline-flex items-center gap-2 text-sm text-ink">
|
||
{input}
|
||
<span>{label}</span>
|
||
</label>
|
||
);
|
||
}
|