跳到正文
GitHub

表单

NativeSelect

平台自己的选择器,能改的地方改了。

什么时候用它

这是逃生口,不是默认值。用在平台确实更好的地方:手机上很长的列表、必须在没有 JavaScript 时也能用的表单、要抠最后一个 KB 的页面。

示例

default

The platform's own picker — better on a phone, and it works without JavaScript.

说明

原生 <select>,重新做了样式。

这是逃生口,不是默认选择——带样式的那个是 Select。在平台自带的选择器确实更好的地方用它:手机上很长的列表、必须在没有 JavaScript 时也能用的表单、最后一 KB 也要计较的页面。浏览器免费给你首字母跳转和移动端滚轮,这些是实打实的。

它做不到的是:一打开就和这套系统的其余部分长得一样。选项列表由操作系统绘制,所以它一个 token 都不带——这正是它不再是默认值的原因。

属性

NativeSelect props
属性类型默认值说明
invalidboolean把静止态的边框画成 `--danger`,并反映到 `aria-invalid` 上。
refRef<HTMLSelectElement>

同时接受 SelectHTMLAttributes<HTMLSelectElement> 里的全部属性,它们会直接透传给底层元素,不再逐条列出。

键盘操作

NativeSelect keyboard interactions
按键作用
Space打开系统自带的选择器。
a–z首字母跳转,由浏览器自己实现。

无障碍

  • 首字母跳转和手机滚轮是浏览器白送的。
  • 它做不到的是打开之后仍然像这套系统——选项列表由操作系统绘制,带不上任何 token。