表单
NativeSelect
平台自己的选择器,能改的地方改了。
什么时候用它
这是逃生口,不是默认值。用在平台确实更好的地方:手机上很长的列表、必须在没有 JavaScript 时也能用的表单、要抠最后一个 KB 的页面。
示例
default
The platform's own picker — better on a phone, and it works without JavaScript.
说明
原生 <select>,重新做了样式。
这是逃生口,不是默认选择——带样式的那个是 Select。在平台自带的选择器确实更好的地方用它:手机上很长的列表、必须在没有 JavaScript 时也能用的表单、最后一 KB 也要计较的页面。浏览器免费给你首字母跳转和移动端滚轮,这些是实打实的。
它做不到的是:一打开就和这套系统的其余部分长得一样。选项列表由操作系统绘制,所以它一个 token 都不带——这正是它不再是默认值的原因。
属性
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| invalid | boolean | 把静止态的边框画成 `--danger`,并反映到 `aria-invalid` 上。 | |
| ref | Ref<HTMLSelectElement> | — |
同时接受 SelectHTMLAttributes<HTMLSelectElement> 里的全部属性,它们会直接透传给底层元素,不再逐条列出。
键盘操作
| 按键 | 作用 |
|---|---|
| Space↓ | 打开系统自带的选择器。 |
| a–z | 首字母跳转,由浏览器自己实现。 |
无障碍
- 首字母跳转和手机滚轮是浏览器白送的。
- 它做不到的是打开之后仍然像这套系统——选项列表由操作系统绘制,带不上任何 token。