Select

Choose one value from a trigger-controlled popup list.

Usage

Environment

Choose one deployment environment from a popup collection.

Deployment environment

Deployments inherit variables from the selected environment.

<!-- Select / Environment -->
<script setup lang="ts">
import { SelectRoot, SelectTrigger, SelectValue, SelectContent, SelectItem, SelectItemIndicator } from '@sectile/vue/select'
const environments = [
  { id: 'production', label: 'Production', detail: 'customer.app' },
  { id: 'staging', label: 'Staging', detail: 'staging.customer.app' },
  { id: 'development', label: 'Development', detail: 'Local workspace' },
]
const environmentIDs = environments.map(({ id }) => id)
const environmentLabel = (id: string) => environments.find(item => item.id === id)?.label ?? id

</script>

<template>
  <SelectRoot :items="environmentIDs" :text-value="environmentLabel" default-value="production">
    <SelectTrigger><SelectValue placeholder="Choose an environment" /></SelectTrigger>
    <SelectContent>
      <SelectItem v-for="item in environments" :key="item.id" :value="item.id">
        <strong>{{ item.label }}</strong>
        <small>{{ item.detail }}</small>
        <SelectItemIndicator>✓</SelectItemIndicator>
      </SelectItem>
    </SelectContent>
  </SelectRoot>
</template>

Disabled option

Show an unavailable option without allowing focus or selection to land on it.

Deployment environment

Deployments inherit variables from the selected environment.

<!-- Select / Disabled Option -->
<script setup lang="ts">
import { SelectRoot, SelectTrigger, SelectValue, SelectContent, SelectItem, SelectItemIndicator } from '@sectile/vue/select'
const environments = [
  { id: 'production', label: 'Production', detail: 'customer.app' },
  { id: 'staging', label: 'Staging', detail: 'staging.customer.app' },
  { id: 'development', label: 'Development', detail: 'Local workspace' },
]
const environmentIDs = environments.map(({ id }) => id)
const environmentLabel = (id: string) => environments.find(item => item.id === id)?.label ?? id

</script>

<template>
  <SelectRoot :items="environmentIDs" :text-value="environmentLabel" default-value="production">
    <SelectTrigger><SelectValue placeholder="Choose an environment" /></SelectTrigger>
    <SelectContent>
      <SelectItem v-for="item in environments" :key="item.id" :value="item.id">
        <strong>{{ item.label }}</strong>
        <small>{{ item.detail }}</small>
        <SelectItemIndicator>✓</SelectItemIndicator>
      </SelectItem>
    </SelectContent>
  </SelectRoot>
</template>

Controlled

Let the parent own the current value and apply accepted changes back to the component.

Deployment environment

Deployments inherit variables from the selected environment.

<!-- Select / Controlled -->
<script setup lang="ts">
import { SelectRoot, SelectTrigger, SelectValue, SelectContent, SelectItem, SelectItemIndicator } from '@sectile/vue/select'
const environments = [
  { id: 'production', label: 'Production', detail: 'customer.app' },
  { id: 'staging', label: 'Staging', detail: 'staging.customer.app' },
  { id: 'development', label: 'Development', detail: 'Local workspace' },
]
const environmentIDs = environments.map(({ id }) => id)
const environmentLabel = (id: string) => environments.find(item => item.id === id)?.label ?? id

</script>

<template>
  <SelectRoot :items="environmentIDs" :text-value="environmentLabel" default-value="production">
    <SelectTrigger><SelectValue placeholder="Choose an environment" /></SelectTrigger>
    <SelectContent>
      <SelectItem v-for="item in environments" :key="item.id" :value="item.id">
        <strong>{{ item.label }}</strong>
        <small>{{ item.detail }}</small>
        <SelectItemIndicator>✓</SelectItemIndicator>
      </SelectItem>
    </SelectContent>
  </SelectRoot>
</template>

Floating positioning

This component uses the shared positioning engine. Use the live positioning example to change side, align, offsets, collision boundaries, strategy, and tracking while inspecting the resolved placement.

API

Vue package: @sectile/vue/select

Components

SelectRoot
SelectTrigger
SelectValue
SelectContent
SelectItem
SelectItemIndicator
SelectViewport
SelectItemText
SelectPortal

Props

`SelectRootProps`

align: TypePositionAlignDefault'start'
Alignment of positioned content relative to its anchor.
as: TypePrimitiveAsDefault'div'
Element or component rendered for this part.
asChild: TypebooleanDefaultfalse
Whether to merge this part into its single child instead of rendering a wrapper.
avoidCollisions: TypebooleanDefaulttrue
Whether positioned content may flip or shift to remain visible.
collisionBoundary: TypePositionBoundaryDefaultundefined
Boundary used to keep positioned content visible.
collisionPadding: TypePositionPaddingDefault8
Space kept between positioned content and its collision boundary.
defaultOpen: TypebooleanDefaultfalse
Initial uncontrolled open state.
defaultValue: Typestring | nullDefaultnull
Initial value used when the component owns its state.
disabled: TypebooleanDefaultfalse
Whether interaction is unavailable.
disabledItems: Typereadonly string[]Default[]
Item values excluded from focus and selection.
form: TypestringDefaultundefined
ID of the native form associated with the control.
hideWhenDetached: TypebooleanDefaultfalse
Whether positioned content hides when its anchor leaves the layout.
items: Typereadonly string[]DefaultRequired
Ordered item values managed by the component.
label: TypestringDefaultundefined
Accessible name announced for the control.
modelValue: Typestring | nullDefaultundefined
Current value when state is controlled by the parent.
name: TypestringDefaultundefined
Name used for native form submission.
open: TypebooleanDefaultundefined
Whether the associated popup or disclosure is open.
policies: TypeSelectPolicies<string>Defaultundefined
Behavior policies that customize validation, movement, or selection.
position: TypebooleanDefaulttrue
Whether the popup is positioned relative to its trigger.
readonly: TypebooleanDefaultfalse
Whether the value can be inspected but not changed.
required: TypebooleanDefaultfalse
Whether the control must contain a valid value before submission.
side: TypePositionSideDefault'bottom'
Preferred side of the anchor for positioned content.
sideOffset: TypenumberDefault8
Distance between positioned content and its anchor.
strategy: TypePositionStrategyDefault'absolute'
CSS positioning strategy used for anchored content.
textValue: Type(id: string) => stringDefaultundefined
Returns searchable or presentational text for an item value.
tracking: TypePositionTrackingDefault'events'
Update strategy used while anchored content is open.
typeaheadTimeoutMs: TypenumberDefault700
Idle time in milliseconds before the printable-text search buffer resets.
unmountOnExit: TypebooleanDefaultfalse
Whether presence-managed content is removed from the DOM after its exit motion completes.

`SelectItemProps`

as: TypePrimitiveAsDefault'div'
Element or component rendered for this part.
asChild: TypebooleanDefaultfalse
Whether to merge this part into its single child instead of rendering a wrapper.
disabled: TypebooleanDefaultfalse
Whether interaction is unavailable.
value: TypestringDefaultRequired
Current value exposed by this contract.

`SelectPartProps`

as: TypePrimitiveAsDefaultVaries by part
Element or component rendered for this part.
asChild: TypebooleanDefaultfalse
Whether to merge this part into its single child instead of rendering a wrapper.

`SelectPortalProps`

defer: TypebooleanDefaultfalse
Whether Teleport target resolution waits until the end of the current mount or update tick.
disabled: TypebooleanDefaultfalse
Whether interaction is unavailable.
to: Typestring | HTMLElementDefault'body'
Teleport target for portalled content.

Slots

`SelectRootSlotProps`

disabled: Typeboolean
Whether interaction is unavailable.
highlightedValue: Typestring | null
Value currently highlighted for interaction.
open: Typeboolean
Whether the associated popup or disclosure is open.
readonly: Typeboolean
Whether the value can be inspected but not changed.
value: Typestring | null
Current value exposed by this contract.

`SelectItemSlotProps`

disabled: Typeboolean
Whether interaction is unavailable.
highlighted: Typeboolean
Whether this item is highlighted for interaction.
selected: Typeboolean
Whether this item is selected.
value: Typestring
Current value exposed by this contract.

Events

`SelectRoot`

highlight: Payloadstring | null
Emitted when the highlighted item changes.
update:modelValue: Payloadstring | null
Emitted when the component requests a new controlled value.
update:open: Payloadboolean
Emitted when the component requests a new open state.

Other types

`SelectTextValueResolver`

type SelectTextValueResolver = NonNullable<SelectRootProps['textValue']>

`SelectValueChangeHandler`

type SelectValueChangeHandler = (value: string | null) => void

`SelectOpenChangeHandler`

type SelectOpenChangeHandler = (value: boolean) => void

`SelectHighlightHandler`

type SelectHighlightHandler = (value: string | null) => void

Parts

Shared scope: [data-scope="select"]. Combine it with a part selector to keep styles local to this component.

Part	Selector	Role	Extra attributes
`root`	`[data-part="root"]`	Defines the component boundary and owns its composed parts.	—
`trigger`	`[data-part="trigger"]`	Opens, closes, or activates the associated content.	—
`value`	`[data-part="value"]`	Displays the current committed value.	—
`content`	`[data-part="content"]`	Contains the component content shown for the active state.	—
`viewport`	`[data-part="viewport"]`	Clips and positions the currently visible content.	—
`item`	`[data-part="item"]`	Represents one selectable or actionable item.	—
`item-text`	`[data-part="item-text"]`	Renders the item label independently from its controls.	—
`item-indicator`	`[data-part="item-indicator"]`	Shows the item selection state.	—

Keyboard interaction

Key	Behavior
`Arrow keys`	Move the active option in the visible orientation.
`Home` / `End`	Move to the first or last eligible option.
`Enter` / `Space`	Select or activate the current option.
`Printable text`	Move to the next matching option when typeahead is available.

Accessibility

The trigger owns a portalled listbox whose active descendant, selected options, and disabled options remain linked across DOM boundaries.

See the corresponding WAI-ARIA pattern for the host accessibility contract.

Select ​

Usage ​

Environment ​

Disabled option ​

Controlled ​

Floating positioning ​

API ​

Props ​

SelectRootProps ​

SelectItemProps ​

SelectPartProps ​

SelectPortalProps ​

Slots ​

SelectRootSlotProps ​

SelectItemSlotProps ​

Events ​

SelectRoot ​

Other types ​

SelectTextValueResolver ​

SelectValueChangeHandler ​

SelectOpenChangeHandler ​

SelectHighlightHandler ​

Parts ​

Keyboard interaction ​

Accessibility ​

Select

Usage

Environment

Disabled option

Controlled

Floating positioning

API

Props

`SelectRootProps`

`SelectItemProps`

`SelectPartProps`

`SelectPortalProps`

Slots

`SelectRootSlotProps`

`SelectItemSlotProps`

Events

`SelectRoot`

Other types

`SelectTextValueResolver`

`SelectValueChangeHandler`

`SelectOpenChangeHandler`

`SelectHighlightHandler`

Parts

Keyboard interaction

Accessibility