NativeSelect 原生选择器

基于原生 `<select>` 的样式化封装，搭配 `NativeSelectOption` / `NativeSelectOptGroup` 使用。

何时使用

  • 需要简单、轻量的原生下拉选择时。
  • 移动端或对样式要求不高的场景。

基础用法

通过 NativeSelect 配合 NativeSelectOption 构建选项列表，用 v-model 绑定当前值。

<script setup lang="ts">
import { ref } from "vue";
import { NativeSelect, NativeSelectOption } from "@reglow/reui";

const value = ref("");
</script>

<template>
  <NativeSelect v-model="value">
    <NativeSelectOption value="apple">苹果</NativeSelectOption>
    <NativeSelectOption value="banana">香蕉</NativeSelectOption>
    <NativeSelectOption value="cherry">樱桃</NativeSelectOption>
  </NativeSelect>
</template>

更多示例

分组选项

使用 NativeSelectOptGroup 对选项进行分组，适合分类较多的数据。

<script setup lang="ts">
import { ref } from "vue";
import { NativeSelect, NativeSelectOptGroup, NativeSelectOption } from "@reglow/reui";

const value = ref("");
</script>

<template>
  <NativeSelect v-model="value" class="w-[220px]">
    <NativeSelectOptGroup label="水果">
      <NativeSelectOption value="apple">苹果</NativeSelectOption>
      <NativeSelectOption value="banana">香蕉</NativeSelectOption>
    </NativeSelectOptGroup>
    <NativeSelectOptGroup label="饮料">
      <NativeSelectOption value="coffee">咖啡</NativeSelectOption>
      <NativeSelectOption value="tea">茶</NativeSelectOption>
    </NativeSelectOptGroup>
  </NativeSelect>
</template>

禁用状态

在 NativeSelect 上设置 disabled 可禁用整个选择器；NativeSelectOption 也透传原生 option 属性，可单独禁用某个选项。

<script setup lang="ts">
import { ref } from "vue";
import { NativeSelect, NativeSelectOption } from "@reglow/reui";

const value = ref("apple");
</script>

<template>
  <div class="flex flex-wrap gap-4">
    <NativeSelect v-model="value" disabled class="w-[160px]">
      <NativeSelectOption value="apple">苹果</NativeSelectOption>
      <NativeSelectOption value="banana">香蕉</NativeSelectOption>
    </NativeSelect>
    <NativeSelect v-model="value" class="w-[160px]">
      <NativeSelectOption value="apple">苹果</NativeSelectOption>
      <NativeSelectOption value="banana" disabled>香蕉（禁用）</NativeSelectOption>
      <NativeSelectOption value="cherry">樱桃</NativeSelectOption>
    </NativeSelect>
  </div>
</template>

导入

import { NativeSelect, NativeSelectOption, NativeSelectOptGroup } from "@reglow/reui";

Props（NativeSelect）

属性类型默认值说明
modelValueAcceptableValue | AcceptableValue[]""绑定值（v-model）
sizesmall | medium | largemedium尺寸（高度 32 / 36 / 44px，字号对齐 Input）
classHTMLAttributes["class"]-附加类名

其余属性透传至原生 <select>。

0.6.5 起 native-select 由 components/ui 迁至 components/reui，@reglow/reui/ui/native-select 旧路径继续可用，新主路径为 @reglow/reui/reui/native-select。

InputSelect 输入选择器
既可以从预设选项中选择，也允许自由输入（按 Enter 确认），支持单选和多选，适用于标签输入、自定义值选择等场景。
Radio 单选框
从少量互斥选项中选择单个选项