组件 · 表单 · 原生 HTML 与 React
选择 Select
原生 <select> 换了皮:选项少、不需要说明和分组时用它。
演示
图片质量
<label class="xxd-select"><select aria-label="图片质量"><option>高</option><option>标准</option></select></label>export function SelectDemo() {
const [value, setValue] = useState("high");
return (
<Select
label="图片质量"
className="w-48"
value={value}
onValueChange={(v) => setValue((v as string) ?? "high")}
items={{ high: "高", standard: "标准" }}
/>
);
}状态
同一个元素的各种状态并排。悬停、聚焦、按下用的是组件 CSS 里真实的规则(构建时复制成强制状态),不是手画的。
默认
悬停
键盘聚焦
禁用
属性与类名
| 属性 / 类名 | 说明 |
|---|---|
| data-variant | bare:设置行里的「一个值 + 一个 chevron」 |
| 类名 | xxd-select |
键盘与读屏
- 没有可见标签时给 <select> 写 aria-label
- 键盘和读屏行为都是浏览器原生的
规则
- 原生 <select>,不重写下拉
- 设置行里用 bare:值 + chevron,不是盒子