Select
<script setup lang="ts">
import { Icon } from '@iconify/vue'
import { ref } from 'vue'
import {
SelectContent,
SelectGroup,
SelectItem,
SelectItemIndicator,
SelectItemText,
SelectLabel,
SelectPortal,
SelectRoot,
SelectScrollDownButton,
SelectScrollUpButton,
SelectSeparator,
SelectTrigger,
SelectValue,
SelectViewport,
} from 'radix-vue'
const fruit = ref()
const options = ['Apple', 'Banana', 'Blueberry', 'Grapes', 'Pineapple']
const vegetables = ['Aubergine', 'Broccoli', 'Carrot', 'Courgette', 'Leek']
</script>
<template>
<SelectRoot v-model="fruit">
<SelectTrigger
class="inline-flex min-w-[160px] items-center justify-between rounded px-[15px] text-[13px] leading-none h-[35px] gap-[5px] bg-white text-grass11 shadow-[0_2px_10px] shadow-black/10 hover:bg-mauve3 focus:shadow-[0_0_0_2px] focus:shadow-black data-[placeholder]:text-green9 outline-none"
aria-label="Customise options"
>
<SelectValue placeholder="Select a fruit..." />
<Icon
icon="radix-icons:chevron-down"
class="h-3.5 w-3.5"
/>
</SelectTrigger>
<SelectPortal>
<SelectContent
class="min-w-[160px] bg-white rounded shadow-[0px_10px_38px_-10px_rgba(22,_23,_24,_0.35),_0px_10px_20px_-15px_rgba(22,_23,_24,_0.2)] will-change-[opacity,transform] data-[side=top]:animate-slideDownAndFade data-[side=right]:animate-slideLeftAndFade data-[side=bottom]:animate-slideUpAndFade data-[side=left]:animate-slideRightAndFade z-[100]"
:side-offset="5"
>
<SelectScrollUpButton class="flex items-center justify-center h-[25px] bg-white text-violet11 cursor-default">
<Icon icon="radix-icons:chevron-up" />
</SelectScrollUpButton>
<SelectViewport class="p-[5px]">
<SelectLabel class="px-[25px] text-xs leading-[25px] text-mauve11">
Fruits
</SelectLabel>
<SelectGroup>
<SelectItem
v-for="(option, index) in options"
:key="index"
class="text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] pr-[35px] pl-[25px] relative select-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:outline-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
:value="option"
>
<SelectItemIndicator class="absolute left-0 w-[25px] inline-flex items-center justify-center">
<Icon icon="radix-icons:check" />
</SelectItemIndicator>
<SelectItemText>
{{ option }}
</SelectItemText>
</SelectItem>
</SelectGroup>
<SelectSeparator class="h-[1px] bg-green6 m-[5px]" />
<SelectLabel class="px-[25px] text-xs leading-[25px] text-mauve11">
Vegetables
</SelectLabel>
<SelectGroup>
<SelectItem
v-for="(option, index) in vegetables"
:key="index"
class="text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] pr-[35px] pl-[25px] relative select-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:outline-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
:value="option"
:disabled="option === 'Courgette'"
>
<SelectItemIndicator class="absolute left-0 w-[25px] inline-flex items-center justify-center">
<Icon icon="radix-icons:check" />
</SelectItemIndicator>
<SelectItemText>
{{ option }}
</SelectItemText>
</SelectItem>
</SelectGroup>
</SelectViewport>
<SelectScrollDownButton class="flex items-center justify-center h-[25px] bg-white text-violet11 cursor-default">
<Icon icon="radix-icons:chevron-down" />
</SelectScrollDownButton>
</SelectContent>
</SelectPortal>
</SelectRoot>
</template>
Features
- Can be controlled or uncontrolled.
- Offers 2 positioning modes.
- Supports items, labels, groups of items.
- Focus is fully managed.
- Full keyboard navigation.
- Supports custom placeholder.
- Typeahead support.
- Supports Right to Left direction.
Installation
Install the component from your command line.
$ npm add radix-vue
Anatomy
Import all parts and piece them together.
<script setup lang="ts">
import {
SelectContent,
SelectGroup,
SelectItem,
SelectItemIndicator,
SelectLabel,
SelectPortal,
SelectRoot,
SelectScrollDownButton,
SelectScrollUpButton,
SelectSeparator,
SelectTrigger,
SelectValue,
SelectViewport,
} from 'radix-vue'
</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 Reference
Root
Contains all the parts of a Select
Prop | Default | Type |
---|---|---|
autocomplete | string Native html input | |
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 | '' | string 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. | |
disabled | boolean When | |
modelValue | string The controlled value of the Select. Can be bind as | |
name | string The name of the Select. 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 | |
required | boolean When |
Emit | Payload |
---|---|
update:modelValue | [value: string] 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 | string Current input values |
open | boolean Current open state |
Trigger
The button that toggles the Select The SelectContent
will position itself by aligning over the trigger.
Prop | Default | Type |
---|---|---|
as | 'button' | AsTag | Component The element or component this component should render as. Can be overwrite by |
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 |
Data Attribute | Value |
---|---|
[data-state] | "open" | "closed" |
[data-disabled] | Present when disabled |
[data-placeholder] | Present when has placeholder |
Value
The part that reflects the selected value. By default the selected item's text will be rendered. if you require more control, you can instead control the select and pass your own children
. It should not be styled to ensure correct positioning. An optional placeholder
prop is also available for when the select has no value.
Prop | Default | Type |
---|---|---|
as | 'span' | AsTag | Component The element or component this component should render as. Can be overwrite by |
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 |
Icon
A small icon often displayed next to the value as a visual affordance for the fact it can be open. By default renders ▼ but you can use your own icon via asChild
or use children
.
Prop | Default | Type |
---|---|---|
as | 'div' | AsTag | Component The element or component this component should render as. Can be overwrite by |
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 | |
textValue | string Optional text used for typeahead purposes. By default the typeahead behavior will use the Use this when the content is complex, or you have non-textual content inside. | |
value* | string The value given as data when submitted with a |
Portal
When used, portals the content part into the body
.
Prop | Default | Type |
---|---|---|
disabled | boolean Disable teleport and render the component inline | |
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 |
Content
The component that pops out when the select is open.
Prop | Default | Type |
---|---|---|
align | 'start' | 'center' | 'end' The preferred alignment against the trigger. May change when collisions occur. | |
alignOffset | number An offset in pixels from the | |
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 overwrite by |
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 | |
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 }. | |
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
| |
prioritizePosition | boolean Force content to be position within the viewport. Might overlap the reference element, which may not be desired. | |
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. | |
sideOffset | number The distance in pixels from the trigger. | |
sticky | 'partial' | 'always' The sticky behavior on the align axis. | |
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 the a |
Data Attribute | Value |
---|---|
[data-state] | "open" | "closed" |
[data-side] | "left" | "right" | "bottom" | "top" |
[data-align] | "start" | "end" | "center" |
CSS Variable | Description |
---|---|
--radix-select-content-transform-origin | The transform-origin computed from the content and arrow positions/offsets. Only present when position="popper" . |
--radix-select-content-available-width | The remaining width between the trigger and the boundary edge. Only present when position="popper" . |
--radix-select-content-available-height | The remaining height between the trigger and the boundary edge. Only present when position="popper" . |
--radix-select-trigger-width | The width of the trigger. Only present when position="popper" . |
--radix-select-trigger-height | The height of the trigger. Only present when position="popper" . |
Viewport
The scrolling viewport that contains all of the items.
Prop | Default | Type |
---|---|---|
as | 'div' | AsTag | Component The element or component this component should render as. Can be overwrite by |
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 |
Item
The component that contains the select items.
Prop | Default | Type |
---|---|---|
as | 'div' | AsTag | Component The element or component this component should render as. Can be overwrite by |
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 | |
textValue | string Optional text used for typeahead purposes. By default the typeahead behavior will use the Use this when the content is complex, or you have non-textual content inside. | |
value* | string The value given as data when submitted with a |
Data Attribute | Value |
---|---|
[data-state] | "checked" | "unchecked" |
[data-highlighted] | Present when highlighted |
[data-disabled] | Present when disabled |
ItemText
The textual part of the item. It should only contain the text you want to see in the trigger when that item is selected. It should not be styled to ensure correct positioning.
Prop | Default | Type |
---|---|---|
as | 'span' | AsTag | Component The element or component this component should render as. Can be overwrite by |
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
Renders when the item is selected. You can style this element directly, or you can use it as a wrapper to put an icon into, or both.
Prop | Default | Type |
---|---|---|
as | 'span' | AsTag | Component The element or component this component should render as. Can be overwrite by |
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
An optional button used as an affordance to show the viewport overflow as well as functionally enable scrolling upwards.
Prop | Default | Type |
---|---|---|
as | 'div' | AsTag | Component The element or component this component should render as. Can be overwrite by |
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
An optional button used as an affordance to show the viewport overflow as well as functionally enable scrolling downwards.
Prop | Default | Type |
---|---|---|
as | 'div' | AsTag | Component The element or component this component should render as. Can be overwrite by |
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
Used to group multiple items. use in conjunction with SelectLabel
to ensure good accessibility via automatic labelling.
Prop | Default | Type |
---|---|---|
as | 'div' | AsTag | Component The element or component this component should render as. Can be overwrite by |
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
Used to render the label of a group. It won't be focusable using arrow keys.
Prop | Default | Type |
---|---|---|
as | 'div' | AsTag | Component The element or component this component should render as. Can be overwrite by |
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
Used to visually separate items in the Select
Prop | Default | Type |
---|---|---|
as | 'div' | AsTag | Component The element or component this component should render as. Can be overwrite by |
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
An optional arrow element to render alongside the content. This can be used to help visually link the trigger with the SelectContent
. Must be rendered inside SelectContent
. Only available when position
is set to popper
.
Prop | Default | Type |
---|---|---|
as | 'svg' | AsTag | Component The element or component this component should render as. Can be overwrite by |
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. |
width | 10 | number The width of the arrow in pixels. |
Examples
Change the positioning mode
By default, Select
will behave similarly to a native MacOS menu by positioning SelectContent
relative to the active item. If you would prefer an alternative positioning approach similar to Popover
or DropdownMenu
then you can set position
to popper
and make use of additional alignment options such as side
, sideOffset
and more.
// index.vue
<script setup lang="ts">
import {
SelectContent,
SelectGroup,
SelectItem,
SelectItemIndicator,
SelectLabel,
SelectPortal,
SelectRoot,
SelectSeparator,
SelectTrigger,
} from 'radix-vue'
</script>
<template>
<SelectRoot>
<SelectTrigger>…</SelectTrigger>
<SelectPortal>
<SelectContent
position="popper"
:side-offset="5"
>
…
</SelectContent>
</SelectPortal>
</SelectRoot>
</template>
Constrain the content size
When using position="popper"
on SelectContent
, you may want to constrain the width of the content so that it matches the trigger width. You may also want to constrain its height to not exceed the viewport.
We expose several CSS custom properties such as --radix-select-trigger-width
and --radix-select-content-available-height
to support this. Use them to constrain the content dimensions.
// index.vue
<script setup lang="ts">
import {
SelectContent,
SelectGroup,
SelectItem,
SelectItemIndicator,
SelectLabel,
SelectPortal,
SelectRoot,
SelectSeparator,
SelectTrigger,
} from 'radix-vue'
</script>
<template>
<SelectRoot>
<SelectTrigger>…</SelectTrigger>
<SelectPortal>
<SelectContent
class="SelectContent"
position="popper"
:side-offset="5"
>
…
</SelectContent>
</SelectPortal>
</SelectRoot>
</template>
/* styles.css */
.SelectContent {
width: var(--radix-select-trigger-width);
max-height: var(--radix-select-content-available-height);
}
With disabled items
You can add special styles to disabled items via the data-disabled
attribute.
// index.vue
<script setup lang="ts">
import {
SelectContent,
SelectGroup,
SelectItem,
SelectItemIndicator,
SelectLabel,
SelectPortal,
SelectRoot,
SelectSeparator,
SelectTrigger,
} from 'radix-vue'
</script>
<template>
<SelectRoot>
<SelectTrigger>…</SelectTrigger>
<SelectPortal>
<SelectContent>
<SelectViewport>
<SelectItem
class="SelectItem"
disabled
>
…
</SelectItem>
<SelectItem>…</SelectItem>
<SelectItem>…</SelectItem>
</SelectViewport>
</SelectContent>
</SelectPortal>
</SelectRoot>
</template>
/* styles.css */
.SelectItem[data-disabled] {
color: "gainsboro";
}
With a placeholder
You can use the placeholder
prop on Value
for when the select has no value. There's also a data-placeholder
attribute on Trigger
to help with styling.
// index.vue
<script setup lang="ts">
import {
SelectContent,
SelectGroup,
SelectItem,
SelectItemIndicator,
SelectLabel,
SelectPortal,
SelectRoot,
SelectSeparator,
SelectTrigger,
} from 'radix-vue'
import './styles.css'
</script>
<template>
<SelectRoot>
<SelectTrigger class="SelectTrigger">
<SelectValue placeholder="Pick an option" />
<SelectIcon />
</SelectTrigger>
<SelectPortal>
<SelectContent>…</SelectContent>
</SelectPortal>
</SelectRoot>
</template>
/* styles.css */
.SelectTrigger[data-placeholder] {
color: "gainsboro";
}
With separators
Use the Separator
part to add a separator between items.
<template>
<SelectRoot>
<SelectTrigger>…</SelectTrigger>
<SelectPortal>
<SelectContent>
<SelectViewport>
<SelectItem>…</SelectItem>
<SelectItem>…</SelectItem>
<SelectItem>…</SelectItem>
<SelectSeparator />
<SelectItem>…</SelectItem>
<SelectItem>…</SelectItem>
</SelectViewport>
</SelectContent>
</SelectPortal>
</SelectRoot>
</template>
With grouped items
Use the Group
and Label
parts to group items in a section.
<template>
<SelectRoot>
<SelectTrigger>…</SelectTrigger>
<SelectPortal>
<SelectContent>
<SelectViewport>
<SelectGroup>
<SelectLabel>Label</SelectLabel>
<SelectItem>…</SelectItem>
<SelectItem>…</SelectItem>
<SelectItem>…</SelectItem>
</SelectGroup>
</SelectViewport>
</SelectContent>
</SelectPortal>
</SelectRoot>
</template>
With complex items
You can use custom content in your items.
<script setup lang="ts">
import {
SelectContent,
SelectGroup,
SelectItem,
SelectItemIndicator,
SelectLabel,
SelectPortal,
SelectRoot,
SelectSeparator,
SelectTrigger,
} from 'radix-vue'
</script>
<template>
<SelectRoot>
<SelectTrigger>…</SelectTrigger>
<SelectPortal>
<SelectContent>
<SelectViewport>
<SelectItem>
<SelectItemText>
<img src="…">
Adolfo Hess
</SelectItemText>
<SelectItemIndicator>…</SelectItemIndicator>
</SelectItem>
<SelectItem>…</SelectItem> <SelectItem>…</SelectItem>
</SelectViewport>
</SelectContent>
</SelectPortal>
</SelectRoot>
</template>
Controlling the value displayed in the trigger
By default the trigger will automatically display the selected item ItemText
's content. You can control what appears by choosing to put things inside/outside the ItemText
part.
If you need more flexibility, you can control the component using v-model
props and passing slot
to SelectValue
. Remember to make sure what you put in there is accessible.
<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>France</SelectItemText>
<SelectItemIndicator>…</SelectItemIndicator>
</SelectItem>
<SelectItem value="united-kingdom">
<SelectItemText>United Kingdom</SelectItemText>
<SelectItemIndicator>…</SelectItemIndicator>
</SelectItem>
<SelectItem value="spain">
<SelectItemText>Spain</SelectItemText>
<SelectItemIndicator>…</SelectItemIndicator>
</SelectItem>
</SelectViewport>
</SelectContent>
</SelectPortal>
</SelectRoot>
</template>
With custom scrollbar
The native scrollbar is hidden by default as we recommend using the ScrollUpButton
and ScrollDownButton
parts for the best UX. If you do not want to use these parts, compose your select with our Scroll Area primitive.
// index.vue
<script setup lang="ts">
import {
ScrollAreaRoot,
ScrollAreaScrollbar,
ScrollAreaThumb,
ScrollAreaViewport,
SelectContent,
SelectGroup,
SelectItem,
SelectItemIndicator,
SelectLabel,
SelectPortal,
SelectRoot,
SelectSeparator,
SelectTrigger,
} from 'radix-vue'
</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="ScrollAreaThumb" />
</ScrollAreaScrollbar>
</ScrollAreaRoot>
</SelectContent>
</SelectPortal>
</SelectRoot>
</template>
/* 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;
}
Accessibility
Adheres to the ListBox WAI-ARIA design pattern.
See the W3C Select-Only Combobox example for more information.
Keyboard Interactions
Key | Description |
---|---|
Space | When focus is on SelectTrigger , opens the select and focuses the selected item. When focus is on an item, selects the focused item. |
Enter | When focus is on SelectTrigger , opens the select and focuses the first item. When focus is on an item, selects the focused item. |
ArrowDown | When focus is on SelectTrigger , opens the Select When focus is on an item, moves focus to the next item. |
ArrowUp | When focus is on SelectTrigger , opens the Select When focus is on an item, moves focus to the previous item. |
Esc | Closes the select and moves focus to SelectTrigger . |
Labelling
Use our Label component in order to offer a visual and accessible label for the Select
<script setup lang="ts">
import { Icon } from '@iconify/vue'
import { ref } from 'vue'
import {
Label,
SelectContent,
SelectGroup,
SelectItem,
SelectItemIndicator,
SelectLabel,
SelectPortal,
SelectRoot,
SelectSeparator,
SelectTrigger,
} from 'radix-vue'
</script>
<template>
<Label>
Country
<SelectRoot>…</SelectRoot>
</Label>
<!-- or -->
<Label for="country">Country</Label>
<SelectRoot>
<SelectTrigger id="country">
…
</SelectTrigger>
<SelectPortal>
<SelectContent>…</SelectContent>
</SelectPortal>
</SelectRoot>
</template>
Custom APIs
Create your own API by abstracting the primitive parts into your own component.
Abstract down to Select
and SelectItem
This example abstracts most of the parts.
Usage
<script setup lang="ts">
import { Select, SelectItem } from './your-select'
</script>
<template>
<Select default-value="2">
<SelectItem value="1">
Item 1
</SelectItem>
<SelectItem value="2">
Item 2
</SelectItem>
<SelectItem value="3">
Item 3
</SelectItem>
</Select>
</template>
Implementation
// your-select.ts
export { default as Select } from 'Select.vue'
export { default as SelectItem } from 'SelectItem.vue'
<!-- Select.vue -->
<script setup lang="ts">
import { CheckIcon, ChevronDownIcon, ChevronUpIcon, } from '@radix-icons/vue'
import { SelectContent, SelectIcon, SelectPortal, SelectRoot, SelectScrollDownButton, SelectScrollUpButton, SelectTrigger, SelectValue, SelectViewport, useForwardPropsEmits } from 'radix-vue'
import type { SelectRootEmits, SelectRootProps } from 'radix-vue'
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>
<SelectScrollDownButton>
<ChevronDownIcon />
</SelectScrollDownButton>
</SelectContent>
</SelectPortal>
</SelectRoot>
</template>
<!-- SelectItem.vue -->
<script setup lang="ts">
import { CheckIcon } from '@radix-icons/vue'
import { SelectItem, SelectItemIndicator, type SelectItemProps, SelectItemText } from 'radix-vue'
const props = defineProps<SelectItemProps>()
</script>
<template>
<SelectItem v-bind="props">
<SelectItemText>
<slot />
</SelectItemText>
<SelectItemIndicator>
<CheckIcon />
</SelectItemIndicator>
</SelectItem>
</template>