Select

显示选项列表供用户选择——通过按钮触发。

View code

功能特性

支持受控与非受控模式。
提供 2 种定位模式。
支持选项、标签、选项组。
完全管理的焦点控制。
完整的键盘导航。
支持自定义占位符。
支持输入搜索。
支持从右到左方向。

安装

通过命令行安装该组件。

$ npm add reka-ui

结构

导入所有部件并进行组合。

vue

<script setup lang="ts">
import {
  SelectContent,
  SelectGroup,
  SelectIcon,
  SelectItem,
  SelectItemIndicator,
  SelectLabel,
  SelectPortal,
  SelectRoot,
  SelectScrollDownButton,
  SelectScrollUpButton,
  SelectSeparator,
  SelectTrigger,
  SelectValue,
  SelectViewport,
} from 'reka-ui'
</script>

<template>
  <SelectRoot>
    <SelectTrigger>
      <SelectValue />
      <SelectIcon />
    </SelectTrigger>

    <SelectPortal>
      <SelectContent>
        <SelectScrollUpButton />
        <SelectViewport>
          <SelectItem>
            <SelectItemText />
            <SelectItemIndicator />
          </SelectItem>
          <SelectGroup>
            <SelectLabel />
            <SelectItem>
              <SelectItemText />
              <SelectItemIndicator />
            </SelectItem>
          </SelectGroup>
          <SelectSeparator />
        </SelectViewport>
        <SelectScrollDownButton />
        <SelectArrow />
      </SelectContent>
    </SelectPortal>
  </SelectRoot>
</template>

API 参考

Root

包含 Select 的所有部件

Prop	Default	Type
`autocomplete`		`string` Native html input `autocomplete` attribute.
`by`		`string \| ((a: AcceptableValue, b: AcceptableValue) => boolean)` Use this to compare objects by a particular field, or pass your own comparison function for complete control over how objects are compared.
`defaultOpen`		`boolean` The open state of the select when it is initially rendered. Use when you do not need to control its open state.
`defaultValue`		`AcceptableValue \| AcceptableValue[]` The value of the select when initially rendered. Use when you do not need to control the state of the Select
`dir`		`'ltr' \| 'rtl'` The reading direction of the combobox when applicable. If omitted, inherits globally from `ConfigProvider` or assumes LTR (left-to-right) reading mode.
`disabled`		`boolean` When `true`, prevents the user from interacting with Select
`modelValue`		`AcceptableValue \| AcceptableValue[]` The controlled value of the Select. Can be bind as `v-model`.
`multiple`		`boolean` Whether multiple options can be selected or not.
`name`		`string` The name of the field. Submitted with its owning form as part of a name/value pair.
`open`		`boolean` The controlled open state of the Select. Can be bind as `v-model:open`.
`required`		`boolean` When `true`, indicates that the user must set the value before the owning form can be submitted.

Emit	Payload
`update:modelValue`	`[value: AcceptableValue]` Event handler called when the value changes.
`update:open`	`[value: boolean]` Event handler called when the open state of the context menu changes.

Slots (default)	Payload
`modelValue`	`AcceptableValue \| AcceptableValue[] \| undefined` Current input values
`open`	`boolean` Current open state

Trigger

切换 Select 的按钮。SelectContent 会通过对齐触发器来定位自身。

Prop	Default	Type
`as`	`'button'`	`AsTag \| Component` The element or component this component should render as. Can be overwritten by `asChild`.
`asChild`		`boolean` Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.
`disabled`		`boolean`
`reference`		`ReferenceElement` The reference (or anchor) element that is being referred to for positioning. If not provided will use the current component as anchor.

Data Attribute	Value
`[data-state]`	`"open" \| "closed"`
`[data-disabled]`	存在时表示禁用
`[data-placeholder]`	存在时表示有占位符

Value

反映选中值的部件。默认会渲染选中项的文本。如需更多控制，可以改为控制 select 并传递自己的 children。不应设置样式以确保正确定位。当 select 没有值时，也可使用可选的 placeholder 属性。

Prop	Default	Type
`as`	`'span'`	`AsTag \| Component` The element or component this component should render as. Can be overwritten by `asChild`.
`asChild`		`boolean` Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.
`placeholder`	`''`	`string` The content that will be rendered inside the `SelectValue` when no `value` or `defaultValue` is set.

Slots (default)	Payload
`selectedLabel`	`string[]`
`modelValue`	`AcceptableValue \| AcceptableValue[] \| undefined`

Icon

一个小图标，通常显示在值旁边，作为可打开功能的视觉提示。默认渲染 ▼，但可以通过 asChild 使用自己的图标，或使用 children。

Prop	Default	Type
`as`	`'div'`	`AsTag \| Component` The element or component this component should render as. Can be overwritten by `asChild`.
`asChild`		`boolean` Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.
`disabled`		`boolean` When `true`, prevents the user from interacting with the item.
`textValue`		`string` Optional text used for typeahead purposes. By default the typeahead behavior will use the `.textContent` of the `SelectItemText` part. Use this when the content is complex, or you have non-textual content inside.
`value*`		`AcceptableValue` The value given as data when submitted with a `name`.

Emit	Payload
`select`	`[event: SelectEvent<AcceptableValue>]` Event handler called when the selecting item. It can be prevented by calling `event.preventDefault`.

Portal

使用时，将内容部件传送至 body。

Prop	Default	Type
`defer`		`boolean` Defer the resolving of a Teleport target until other parts of the application have mounted (requires Vue 3.5.0+) reference
`disabled`		`boolean` Disable teleport and render the component inline reference
`forceMount`		`boolean` Used to force mounting when more control is needed. Useful when controlling animation with Vue animation libraries.
`to`		`string \| HTMLElement` Vue native teleport component prop `:to` reference

Content

Select 打开时弹出的组件。

tip

Built with Presence component - supports any animation techniques while maintaining access to presence emitted events.

Prop	Default	Type
`align`		`'start' \| 'center' \| 'end'` The preferred alignment against the trigger. May change when collisions occur.
`alignFlip`		`boolean` Flip alignment when colliding with boundary. May only occur when `prioritizePosition` is true.
`alignOffset`		`number` An offset in pixels from the `start` or `end` alignment options.
`arrowPadding`		`number` The padding between the arrow and the edges of the content. If your content has border-radius, this will prevent it from overflowing the corners.
`as`	`'div'`	`AsTag \| Component` The element or component this component should render as. Can be overwritten by `asChild`.
`asChild`		`boolean` Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.
`avoidCollisions`		`boolean` When `true`, overrides the side and align preferences to prevent collisions with boundary edges.
`bodyLock`		`boolean` The document.body will be lock, and scrolling will be disabled.
`collisionBoundary`		`Element \| (Element \| null)[] \| null` The element used as the collision boundary. By default this is the viewport, though you can provide additional element(s) to be included in this check.
`collisionPadding`		`number \| Partial<Record<'top' \| 'right' \| 'bottom' \| 'left', number>>` The distance in pixels from the boundary edges where collision detection should occur. Accepts a number (same for all sides), or a partial padding object, for example: { top: 20, left: 20 }.
`disableUpdateOnLayoutShift`		`boolean` Whether to disable the update position for the content when the layout shifted.
`forceMount`		`boolean` Used to force mounting when more control is needed. Useful when controlling animation with Vue animation libraries.
`hideWhenDetached`		`boolean` Whether to hide the content when the trigger becomes fully occluded.
`position`		`'popper' \| 'item-aligned'` The positioning mode to use `item-aligned (default)` - behaves similarly to a native MacOS menu by positioning content relative to the active item. `popper` - positions content in the same way as our other primitives, for example `Popover` or `DropdownMenu`.
`positionStrategy`		`'fixed' \| 'absolute'` The type of CSS position property to use.
`prioritizePosition`		`boolean` Force content to be position within the viewport. Might overlap the reference element, which may not be desired.
`reference`		`ReferenceElement` The custom element or virtual element that will be set as the reference to position the floating element. If provided, it will replace the default anchor element.
`side`		`'top' \| 'right' \| 'bottom' \| 'left'` The preferred side of the trigger to render against when open. Will be reversed when collisions occur and avoidCollisions is enabled.
`sideFlip`		`boolean` Flip to the opposite side when colliding with boundary.
`sideOffset`		`number` The distance in pixels from the trigger.
`sticky`		`'partial' \| 'always'` The sticky behavior on the align axis. `partial` will keep the content in the boundary as long as the trigger is at least partially in the boundary whilst "always" will keep the content in the boundary regardless.
`updatePositionStrategy`		`'always' \| 'optimized'` Strategy to update the position of the floating element on every animation frame.

Emit	Payload
`closeAutoFocus`	`[event: Event]` Event handler called when auto-focusing on close. Can be prevented.
`escapeKeyDown`	`[event: KeyboardEvent]` Event handler called when the escape key is down. Can be prevented.
`pointerDownOutside`	`[event: PointerDownOutsideEvent]` Event handler called when a `pointerdown` event happens outside of the `DismissableLayer`. Can be prevented.

Data Attribute	Value
`[data-state]`	`"open" \| "closed"`
`[data-side]`	`"left" \| "right" \| "bottom" \| "top"`
`[data-align]`	`"start" \| "end" \| "center"`

CSS Variable	Description
`--reka-select-content-transform-origin`	根据内容和箭头的定位/偏移计算出的 `transform-origin`。仅在 `position="popper"` 时存在。
`--reka-select-content-available-width`	触发器与边界边缘之间的剩余宽度。仅在 `position="popper"` 时存在。
`--reka-select-content-available-height`	触发器与边界边缘之间的剩余高度。仅在 `position="popper"` 时存在。
`--reka-select-trigger-width`	触发器的宽度。仅在 `position="popper"` 时存在。
`--reka-select-trigger-height`	触发器的高度。仅在 `position="popper"` 时存在。

Viewport

包含所有选项的滚动视口。

Prop	Default	Type
`as`	`'div'`	`AsTag \| Component` The element or component this component should render as. Can be overwritten by `asChild`.
`asChild`		`boolean` Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.
`nonce`		`string` Will add `nonce` attribute to the style tag which can be used by Content Security Policy. If omitted, inherits globally from `ConfigProvider`.

Item

包含选择选项的组件。

Prop	Default	Type
`as`	`'div'`	`AsTag \| Component` The element or component this component should render as. Can be overwritten by `asChild`.
`asChild`		`boolean` Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.
`disabled`		`boolean` When `true`, prevents the user from interacting with the item.
`textValue`		`string` Optional text used for typeahead purposes. By default the typeahead behavior will use the `.textContent` of the `SelectItemText` part. Use this when the content is complex, or you have non-textual content inside.
`value*`		`AcceptableValue` The value given as data when submitted with a `name`.

Emit	Payload
`select`	`[event: SelectEvent<AcceptableValue>]` Event handler called when the selecting item. It can be prevented by calling `event.preventDefault`.

Data Attribute	Value
`[data-state]`	`"checked" \| "unchecked"`
`[data-highlighted]`	高亮时存在
`[data-disabled]`	禁用时存在

ItemText

选项的文本部分。应仅包含当该项被选中时希望在触发器中看到的文本。不应设置样式以确保正确定位。

Prop	Default	Type
`as`	`'span'`	`AsTag \| Component` The element or component this component should render as. Can be overwritten by `asChild`.
`asChild`		`boolean` Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.

ItemIndicator

在选项被选中时渲染。可以直接设置此元素的样式，或将其用作包装器来放入图标，或两者兼有。

Prop	Default	Type
`as`	`'span'`	`AsTag \| Component` The element or component this component should render as. Can be overwritten by `asChild`.
`asChild`		`boolean` Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.

ScrollUpButton

一个可选按钮，用作显示视口溢出的视觉提示，并在功能上支持向上滚动。

Prop	Default	Type
`as`	`'div'`	`AsTag \| Component` The element or component this component should render as. Can be overwritten by `asChild`.
`asChild`		`boolean` Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.

ScrollDownButton

一个可选按钮，用作显示视口溢出的视觉提示，并在功能上支持向下滚动。

Prop	Default	Type
`as`	`'div'`	`AsTag \| Component` The element or component this component should render as. Can be overwritten by `asChild`.
`asChild`		`boolean` Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.

Group

用于对多个选项进行分组。与 SelectLabel 结合使用，通过自动标记确保良好的可访问性。

Prop	Default	Type
`as`	`'div'`	`AsTag \| Component` The element or component this component should render as. Can be overwritten by `asChild`.
`asChild`		`boolean` Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.

Label

用于渲染分组的标签。无法使用方向键聚焦。

Prop	Default	Type
`as`	`'div'`	`AsTag \| Component` The element or component this component should render as. Can be overwritten by `asChild`.
`asChild`		`boolean` Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.
`for`		`string`

Separator

用于在 Select 中视觉分隔选项

Prop	Default	Type
`as`	`'div'`	`AsTag \| Component` The element or component this component should render as. Can be overwritten by `asChild`.
`asChild`		`boolean` Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.

Arrow

一个可选的箭头元素，与内容一起渲染。可用于帮助在视觉上将触发器与 SelectContent 连接起来。必须在 SelectContent 内部渲染。仅在 position 设置为 popper 时可用。

Prop	Default	Type
`as`	`'svg'`	`AsTag \| Component` The element or component this component should render as. Can be overwritten by `asChild`.
`asChild`		`boolean` Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.
`height`	`5`	`number` The height of the arrow in pixels.
`rounded`		`boolean` When `true`, render the rounded version of arrow. Do not work with `as`/`asChild`
`width`	`10`	`number` The width of the arrow in pixels.

示例

更改定位模式

默认情况下，Select 的行为类似于原生 MacOS 菜单，将 SelectContent 相对于活动项进行定位。如果希望采用类似 Popover 或 DropdownMenu 的替代定位方法，可以将 position 设置为 popper，并使用额外的对齐选项，如 side、sideOffset 等。

vue

// index.vue
<script setup lang="ts">
import {
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectItemIndicator,
  SelectLabel,
  SelectPortal,
  SelectRoot,
  SelectSeparator,
  SelectTrigger,
} from 'reka-ui'
</script>

<Template>
  <SelectRoot>
    <SelectTrigger>…</SelectTrigger>
    <SelectPortal>
      <SelectContent
        position="popper"
        :side-offset="5"
      >
        …
      </SelectContent>
    </SelectPortal>
  </SelectRoot>
</Template>

限制内容尺寸

在 SelectContent 上使用 position="popper" 时，可能需要限制内容的宽度以匹配触发器的宽度。可能还需要限制其高度，使其不超过视口。

我们提供了几个 CSS 自定义属性，如 --reka-select-trigger-width 和 --reka-select-content-available-height 来支持此功能。使用它们来限制内容的尺寸。

vue

// index.vue
<script setup lang="ts">
import {
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectItemIndicator,
  SelectLabel,
  SelectPortal,
  SelectRoot,
  SelectSeparator,
  SelectTrigger,
} from 'reka-ui'
</script>

<template>
  <SelectRoot>
    <SelectTrigger>…</SelectTrigger>
    <SelectPortal>
      <SelectContent
        class="SelectContent"
        position="popper"
        :side-offset="5"
      >
        …
      </SelectContent>
    </SelectPortal>
  </SelectRoot>
</template>

css

/* styles.css */
.SelectContent {
  width: var(--reka-select-trigger-width);
  max-height: var(--reka-select-content-available-height);
}

包含禁用项

可以通过 data-disabled 属性为禁用项添加特殊样式。

vue

// index.vue
<script setup lang="ts">
import {
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectItemIndicator,
  SelectLabel,
  SelectPortal,
  SelectRoot,
  SelectSeparator,
  SelectTrigger,
} from 'reka-ui'
</script>

<template>
  <SelectRoot>
    <SelectTrigger>…</SelectTrigger>
    <SelectPortal>
      <SelectContent>
        <SelectViewport>
          <SelectItem
            class="SelectItem"
            disabled
          >
            …
          </SelectItem>
          <SelectItem>…</SelectItem>
          <SelectItem>…</SelectItem>
        </SelectViewport>
      </SelectContent>
    </SelectPortal>
  </SelectRoot>
</template>

css

/* styles.css */
.SelectItem[data-disabled] {
  color: "gainsboro";
}

包含占位符

当 select 没有值时，可以在 Value 上使用 placeholder 属性。触发器上还有一个 data-placeholder 属性，可用于样式设置。

vue

// index.vue
<script setup lang="ts">
import {
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectItemIndicator,
  SelectLabel,
  SelectPortal,
  SelectRoot,
  SelectSeparator,
  SelectTrigger,
} from 'reka-ui'
import './styles.css'
</script>

<template>
  <SelectRoot>
    <SelectTrigger class="SelectTrigger">
      <SelectValue placeholder="选择一个选项" />
      <SelectIcon />
    </SelectTrigger>
    <SelectPortal>
      <SelectContent>…</SelectContent>
    </SelectPortal>
  </SelectRoot>
</template>

css

/* styles.css */
.SelectTrigger[data-placeholder] {
  color: "gainsboro";
}

包含分隔符

使用 Separator 部件在选项之间添加分隔符。

vue

<template>
 极少数情况
  <SelectRoot>
    <SelectTrigger>…</SelectTrigger>
    <SelectPortal>
      <SelectContent>
        <SelectViewport>
          <SelectItem>…</SelectItem>
          <SelectItem>…</SelectItem>
          <Select极少数情况 >…</SelectItem>
          <SelectSeparator />
          <SelectItem>…</SelectItem>
          <SelectItem>…</SelectItem>
        </SelectViewport>
      </SelectContent>
    </SelectPortal>
  </SelectRoot>
</template>

包含分组选项

使用 Group 和 Label 部件将选项分组到各个部分。

vue

<template>
  <SelectRoot>
    <SelectTrigger>…</SelectTrigger>
    <SelectPortal>
      <SelectContent>
        <SelectViewport>
          <SelectGroup>
            <SelectLabel>标签</SelectLabel>
            <SelectItem>…</SelectItem>
            <SelectItem>…</SelectItem>
            <SelectItem>…</SelectItem>
          </极少数情况 >
        </SelectViewport>
      </SelectContent>
    </SelectPortal>
  </SelectRoot>
</template>

包含复杂选项

可以在选项中使用自定义内容。

vue

<script setup lang="ts">
import {
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectItemIndicator,
  SelectLabel,
  SelectPortal,
  SelectRoot,
  SelectSeparator,
  SelectTrigger,
} from 'reka-ui'
</script>

<template>
  <SelectRoot>
    <SelectTrigger>…</Select极少数情况 >
    <SelectPortal>
      <SelectContent>
        <SelectViewport>
          <SelectItem>
            <SelectItemText>
              <img src="…">
              Adolfo Hess
            </SelectItemText>
            <SelectItemIndicator>…</SelectItemIndicator>
          </SelectItem>
          <SelectItem>…</SelectItem> <SelectItem>…</SelectItem>
        </SelectViewport>
      </SelectContent>
    </SelectPortal>
  </SelectRoot>
</template>

控制触发器中显示的值

默认情况下，触发器会显示选中项的文本（不再像 v1 那样自动渲染 ItemText 的内容）。

如果需要渲染纯文本以外的内容，可以使用 v-model 属性（或访问 SelectValue 的 slotProps）来控制组件，并向 SelectValue 传递 slot。请确保放入的内容具有可访问性。

vue

<script setup>
const countries = { 'france': '🇫🇷', 'united-kingdom': '🇬🇧', 'spain': '🇪🇸' }

const value = ref('france')
</script>

<template>
  <SelectRoot v-model="value">
    <SelectTrigger>
      <SelectValue :aria-label="value">
        {{ countries[value] }}
      </SelectValue>
      <SelectIcon />
    </SelectTrigger>
    <SelectPortal>
      <SelectContent>
        <SelectViewport>
          <SelectItem value="france">
            <SelectItemText>法国</SelectItemText>
            <SelectItemIndicator>…</SelectItemIndicator>
          </SelectItem>
          <SelectItem value="united-kingdom">
            <SelectItemText>英国</Select极少数情况 >
            <SelectItemIndicator>…</SelectItemIndicator>
          </SelectItem>
          <SelectItem value="spain">
            <SelectItemText>西班牙</SelectItemText>
            <SelectItemIndicator>…</SelectItemIndicator>
          </SelectItem>
        </Select极少数情况 >
      </SelectContent>
    </SelectPortal>
  </SelectRoot>
</template>

包含自定义滚动条

原生滚动条默认被隐藏，因为我们建议使用 ScrollUpButton 和 ScrollDownButton 部件以获得最佳用户体验。如果不想使用这些部件，可以使用我们的 Scroll Area 原语来组合您的 select。

vue

// index.vue
<script setup lang="ts">
import {
  ScrollAreaRoot,
  ScrollAreaScrollbar,
  ScrollAreaThumb,
  ScrollAreaViewport,
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectItemIndicator,
  SelectLabel,
  SelectPortal,
  SelectRoot,
  SelectSeparator,
  SelectTrigger,
} from 'reka-ui'
</script>

<template>
  <SelectRoot>
    <SelectTrigger>…</SelectTrigger>
    <SelectPortal>
      <SelectContent>
        <ScrollAreaRoot
          class="ScrollAreaRoot"
          type="auto"
        >
          <SelectViewport as-child>
            <ScrollAreaViewport class="ScrollAreaViewport">
              <StyledItem>…</StyledItem> <StyledItem>…</StyledItem>
              <StyledItem>…</StyledItem>
            </ScrollAreaViewport>
          </SelectViewport>
          <ScrollAreaScrollbar
            class="ScrollAreaScrollbar"
            orientation="vertical"
          >
            <ScrollAreaThumb class="ScrollArea极少数情况 " />
          </ScrollAreaScrollbar>
        </ScrollAreaRoot>
      </SelectContent>
    </SelectPortal>
  </SelectRoot>
</template>

css

/* styles.css */
.ScrollAreaRoot {
  width: 100%;
  height: 100%;
}

.ScrollAreaViewport {
  width: 100%;
  height: 100%;
}

.ScrollAreaScrollbar {
  width: 4px;
  padding: 5px 2px;
}

.ScrollAreaThumb {
  background: rgba(0, 0, 0, 0.3);
  borderradius: 3px;
}

可访问性

遵循 ListBox WAI-ARIA 设计模式。

更多信息请参阅 W3C 仅选择组合框示例。

键盘交互

Key	Description
`空格键`	当焦点在 `SelectTrigger` 上时，打开 select 并聚焦选中项。当焦点在选项上时，选择聚焦的选项。
`回车键`	当焦点在 `SelectTrigger` 上时，打开 select 并聚焦第一个选项。当焦点在选项上时，选择聚焦的选项。
`下箭头`	当焦点在 <极少数情况 >SelectTrigger 上时，打开 Select 当焦点在选项上时，将焦点移动到下一个选项。
`上箭头`	当焦点在 `SelectTrigger` 上时，打开 Select 当焦点在选项上时，将焦点移动到上一个选项。
`Esc`	关闭 select 并将焦点移动到 `SelectTrigger`。

<script setup lang="ts">
import { Icon } from '@iconify/vue'
import {
  Label,
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectItemIndicator,
  SelectLabel,
  SelectPortal,
  SelectRoot,
  SelectSeparator,
  SelectTrigger,
} from 'reka-ui'
import { ref } from 'vue'
</script>

<template>
  <Label>
    国家
    <SelectRoot>…</SelectRoot>
  </Label>

  <!-- 或 -->

  <Label for="country">国家</Label>
  <SelectRoot>
    <SelectTrigger id="country">
      …
    </SelectTrigger>
    <SelectPortal>
      <SelectContent>…</SelectContent>
    </SelectPortal>
  </SelectRoot>
</template>

自定义 API

通过将原始部件抽象到自己的组件中来创建您自己的 API。

抽象为 `Select` 和 `SelectItem`

此示例抽象了大部分部件。

用法

vue

<script setup lang="ts">
import { Select, SelectItem } from './your-select'
</script>

<template>
  <Select default-value="2">
    <SelectItem value="1">
      选项 1
    </SelectItem>
    <SelectItem value="2">
      选项 2
    </SelectItem>
    <SelectItem value="3">
      选项 3
    </SelectItem>
  </Select>
</template>

实现

// your-select.ts
export { default as Select } from 'Select.vue'
export { default as SelectItem } from 'SelectItem.v极少数情况 '

vue

<!-- Select.vue -->
<script setup lang="ts">
import type { SelectRootEmits, SelectRootProps } from 'reka-ui'
import { CheckIcon, ChevronDownIcon, ChevronUpIcon, } from '@radix-icons/vue'
import { SelectContent, SelectIcon, SelectPortal, SelectRoot, SelectScrollDownButton, SelectScrollUpButton, SelectTrigger, SelectValue, SelectViewport, useForwardPropsEmits } from 'reka-ui'

const props = defineProps<SelectRootProps>()
const emits = defineEmits<SelectRootEmits>()

const forward = useForwardPropsEmits(props, emits)
</script>

<template>
  <SelectRoot v-bind="forward">
    <SelectTrigger>
      <SelectValue />
      <SelectIcon>
        <ChevronDownIcon />
      </SelectIcon>
    </SelectTrigger>

    <SelectPortal>
      <SelectContent>
        <SelectScrollUpButton>
          <ChevronUpIcon />
        </SelectScrollUpButton>
        <SelectViewport>
          <slot />
        </SelectViewport>
        <SelectScroll极少数情况 >
          <ChevronDownIcon />
        </SelectScrollDownButton>
      </SelectContent>
    </Select极少数情况 >
  </SelectRoot>
</template>

vue

<!-- 极少数情况 .vue -->
<script setup lang="ts">
import type { SelectItemProps } from 'reka-ui'
import { CheckIcon } from '@rad极少数情况 -icons/vue'
import { SelectItem, SelectItemIndicator, SelectItemText } from 'reka-ui'

const props = defineProps<SelectItemProps>()
</script>

<template>
  <SelectItem v-bind="props">
    <SelectItemText>
      <slot />
    </SelectItemText>
    <SelectItemIndicator>
      <CheckIcon />
    </SelectItemIndicator>
  </SelectItem>
</template>

Select ​

功能特性 ​

安装 ​

结构 ​

API 参考 ​

Root ​

Trigger ​

Value ​

Icon ​

Portal ​

Content ​

Viewport ​

Item ​

ItemText ​

ItemIndicator ​

ScrollUpButton ​

ScrollDownButton ​

Group ​

Label ​

Separator ​

Arrow ​

示例 ​

更改定位模式 ​

限制内容尺寸 ​

包含禁用项 ​

包含占位符 ​

包含分隔符 ​

包含分组选项 ​

包含复杂选项 ​

控制触发器中显示的值 ​

包含自定义滚动条 ​

可访问性 ​

键盘交互 ​

标签 ​

自定义 API ​

抽象为 Select 和 SelectItem ​

用法 ​

实现 ​