#原生选择器
原生选择器让用户从较短的固定选项中选择一个值，并保留操作系统熟悉的交互与无障碍能力。
为当前订单选择一种水果。
安装Terminal
npm install @a3s-lab/ui@0.4.0<div class="field">
<label for="native-select-fruit-html">水果</label>
<select id="native-select-fruit-html" class="native-select" aria-describedby="native-select-fruit-help-html">
<option value="">选择水果</option>
<option value="apple">苹果</option>
<option value="banana">香蕉</option>
<option value="blueberry">蓝莓</option>
<option value="pineapple">菠萝</option>
</select>
<p id="native-select-fruit-help-html">为当前订单选择一种水果。</p>
</div>import "@a3s-lab/ui/a3s.css";
import "@a3s-lab/ui/all";#用法
引入 CSS
导入 Tailwind 和一个完整的 A3S UI 样式包。
@import "tailwindcss";
@import "@a3s-lab/ui/a3s.css";或者只导入基本CSS、原生选择CSS组件和一个样式包。
@import "tailwindcss";
@import "@a3s-lab/ui/base.css";
@import "@a3s-lab/ui/components/native-select.css";
@import "@a3s-lab/ui/styles/a3s.css";使用CDN或批量程序导入？请参见安装页。
添加原生选择器 HTML
为原生 <select> 添加规范类 class="native-select"，并继续使用标准 <option> 与 <optgroup> 元素。旧的 select 类仅作为迁移期视觉别名保留；新代码与框架适配器统一使用 native-select，避免与自定义 Select 根节点混淆。
<div class="field">
<label for="native-select-fruit-html">水果</label>
<select id="native-select-fruit-html" class="native-select" aria-describedby="native-select-fruit-help-html">
<option value="">选择水果</option>
<option value="apple">苹果</option>
<option value="banana">香蕉</option>
<option value="blueberry">蓝莓</option>
<option value="pineapple">菠萝</option>
</select>
<p id="native-select-fruit-help-html">为当前订单选择一种水果。</p>
</div>使用 Native Select 实现原生浏览器行为、表单集成和移动优化选择器。使用 Select 自定义选项内容、多选行为或 JavaScript API。
#示例
#组
<div class="field w-full">
<label for="native-select-food-zh">食物</label>
<select id="native-select-food-zh" class="native-select w-full">
<option value="">选择食物</option>
<optgroup label="水果">
<option value="apple">苹果</option>
<option value="banana">香蕉</option>
<option value="blueberry">蓝莓</option>
</optgroup>
<optgroup label="蔬菜">
<option value="carrot">胡萝卜</option>
<option value="potato">土豆</option>
<option value="tomato">番茄</option>
</optgroup>
<optgroup label="暂不可用" disabled>
<option value="mango">芒果——当前非产季</option>
</optgroup>
</select>
</div>#已禁用
此选项由工作区策略统一管理。
<div class="field w-full" data-disabled="true">
<label for="native-select-disabled-zh">水果</label>
<select id="native-select-disabled-zh" class="native-select w-full" value="apple" aria-describedby="native-select-disabled-reason-zh" disabled>
<option value="">选择水果</option>
<option value="apple">苹果</option>
<option value="banana">香蕉</option>
</select>
<p id="native-select-disabled-reason-zh">此选项由工作区策略统一管理。</p>
</div>#无效
请选择一种水果后继续。
<div class="field" data-invalid="true">
<label for="native-select-invalid-zh">水果</label>
<select id="native-select-invalid-zh" class="native-select w-full" required aria-invalid="true" aria-describedby="native-select-invalid-error-zh">
<option value="">选择水果</option>
<option value="apple">苹果</option>
<option value="banana">香蕉</option>
</select>
<p id="native-select-invalid-error-zh" role="alert">请选择一种水果后继续。</p>
</div>required 让浏览器的有效性结果与手动声明的 aria-invalid 对同一个空值保持一致。
#尺寸
<div class="grid w-full gap-4 sm:grid-cols-2">
<div class="field">
<label for="native-select-size-default-zh">默认</label>
<select id="native-select-size-default-zh" class="native-select w-full">
<option value="apple">苹果</option>
<option value="banana">香蕉</option>
</select>
</div>
<div class="field">
<label for="native-select-size-small-zh">小尺寸</label>
<select id="native-select-size-small-zh" class="native-select w-full" data-size="sm">
<option value="apple">苹果</option>
<option value="banana">香蕉</option>
</select>
</div>
</div>#RTL
在选择元素或父元素上设置 dir="rtl"。
<div class="field w-full" dir="rtl">
<label for="native-select-fruit-rtl-zh">الفاكهة</label>
<select id="native-select-fruit-rtl-zh" class="native-select w-full">
<option value="">اختر فاكهة</option>
<option value="apple">تفاح</option>
<option value="banana">موز</option>
<option value="blueberry">توت</option>
</select>
</div>