Select

A select element to choose from a list of options.

<script setup lang="ts">
import {
  ASelectContent,
  ASelectGroup,
  ASelectItem,
  ASelectItemIndicator,
  ASelectItemText,
  ASelectLabel,
  ASelectPortal,
  ASelectRoot,
  ASelectSeparator,
  ASelectTrigger,
  ASelectValue,
  ASelectViewport,
} from 'akar';
import { ref } from 'vue';

const fruit = ref();

const fruits = ['Apple', 'Banana', 'Blueberry', 'Grapes', 'Pineapple'];
const vegetables = ['Aubergine', 'Broccoli', 'Carrot', 'Courgette', 'Leek'];
</script>

<template>
  <ASelectRoot v-model="fruit">
    <ASelectTrigger
      class="group text-sm color-text-highlighted px-2.5 py-1.5 pe-9 rounded-md bg-background inline-flex gap-1.5 ring ring-ring-accented ring-inset transition-colors-280 items-center relative focus:(outline-none ring-2 ring-primary ring-inset)"
      aria-label="Customise options"
    >
      <ASelectValue
        class="pointer-events-none truncate"
        placeholder="ASelect a fruit..."
      />
      <span class="pe-2.5 flex items-center end-0 inset-y-0 absolute">
        <span
          class="i-lucide:chevron-down color-text-dimmed shrink-0 size-5"
        />
      </span>
    </ASelectTrigger>

    <ASelectPortal>
      <ASelectContent
        class="rounded-md bg-white flex flex-col max-h-60 w-$akar-select-trigger-width pointer-events-auto ring ring-ring shadow-lg origin-$akar-select-content-transform-origin overflow-hidden data-[state=closed]:animate-out data-[state=open]:animate-in data-[state=closed]:animate-duration-280 data-[state=open]:animate-duration-280 data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0 data-[state=open]:data-[side=bottom]:slide-in-top-5% data-[state=closed]:data-[side=bottom]:slide-out-top-5%"
        :side-offset="5"
      >
        <ASelectViewport class="p-[5px]">
          <ASelectGroup class="p-1 isolate">
            <ASelectLabel class="text-xs color-text-highlighted font-semibold p-1.5 gap-1.5">
              Fruits
            </ASelectLabel>

            <ASelectItem
              v-for="(option, index) in fruits"
              :key="index"
              class="group text-sm p-1.5 outline-none flex gap-1.5 w-full cursor-pointer select-none transition-colors-280 items-center relative data-[state=checked]:color-primary before:(rounded-md content-empty transition-colors-280 inset-px absolute -z-1) data-[disabled]:(opacity-75 cursor-not-allowed) data-[highlighted]:not-[[data-state=checked]]:color-black data-[state=checked]:before:bg-background-elevated data-[highlighted]:not-[[data-state=checked]]:before:bg-primary/30"
              :value="option"
            >
              <ASelectItemText class="flex flex-1 flex-col min-w-0">
                {{ option }}
              </ASelectItemText>

              <span class="ms-auto inline-flex gap-1.5 items-center">
                <ASelectItemIndicator class="shrink-0 size-5">
                  <i class="i-lucide:check" />
                </ASelectItemIndicator>
              </span>
            </ASelectItem>
          </ASelectGroup>
          <ASelectSeparator class="my-1 bg-border h-px -mx-1" />
          <ASelectGroup class="p-1 isolate">
            <ASelectLabel class="text-xs color-text-highlighted font-semibold p-1.5 gap-1.5">
              Vegetables
            </ASelectLabel>
            <ASelectItem
              v-for="(option, index) in vegetables"
              :key="index"
              class="group text-sm p-1.5 outline-none flex gap-1.5 w-full cursor-pointer select-none transition-colors-280 items-center relative data-[state=checked]:color-primary before:(rounded-md content-empty transition-colors-280 inset-px absolute -z-1) data-[disabled]:(opacity-75 cursor-not-allowed) data-[highlighted]:not-[[data-state=checked]]:color-black data-[state=checked]:before:bg-background-elevated data-[highlighted]:not-[[data-state=checked]]:before:bg-primary/30"
              :value="option"
              :disabled="option === 'Courgette'"
            >
              <ASelectItemText class="flex flex-1 flex-col min-w-0">
                {{ option }}
              </ASelectItemText>

              <span class="ms-auto inline-flex gap-1.5 items-center">
                <ASelectItemIndicator class="shrink-0 size-5">
                  <i class="i-lucide:check" />
                </ASelectItemIndicator>
              </span>
            </ASelectItem>
          </ASelectGroup>
        </ASelectViewport>
      </ASelectContent>
    </ASelectPortal>
  </ASelectRoot>
</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.

Anatomy

Import all parts and piece them together.

<script setup lang="ts">
import {
  ASelectContent,
  ASelectGroup,
  ASelectIcon,
  ASelectItem,
  ASelectItemIndicator,
  ASelectLabel,
  ASelectPortal,
  ASelectRoot,
  ASelectScrollDownButton,
  ASelectScrollUpButton,
  ASelectSeparator,
  ASelectTrigger,
  ASelectValue,
  ASelectViewport,
} from 'akar';
</script>

<template>
  <ASelectRoot>
    <ASelectTrigger>
      <ASelectValue />
      <ASelectIcon />
    </ASelectTrigger>

    <ASelectPortal>
      <ASelectContent>
        <ASelectScrollUpButton />
        <ASelectViewport>
          <ASelectItem>
            <ASelectItemText />
            <ASelectItemIndicator />
          </ASelectItem>
          <ASelectGroup>
            <ASelectLabel />
            <ASelectItem>
              <ASelectItemText />
              <ASelectItemIndicator />
            </ASelectItem>
          </ASelectGroup>
          <ASelectSeparator />
        </ASelectViewport>
        <ASelectScrollDownButton />
        <ASelectArrow />
      </ASelectContent>
    </ASelectPortal>
  </ASelectRoot>
</template>

One benefit of using Akar is its flexibility and low-level control over the components. However, this also means that you may need to manually construct more complex UI elements by combining multiple Akar components together.

If you feel there's a lot of elements that needs to be constructed manually using Akar, consider using Pohon UI instead. It provides a higher-level abstraction over Akar components with pre-defined styles and behaviors that can help you build UIs faster.

API Reference

Root

Contains all the parts of a ASelect

Props

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 `AConfigProvider` or assumes LTR (left-to-right) reading mode.
`disabled`		`boolean` When `true`, prevents the user from interacting with Select
`modelValue`		`AcceptableValue \| AcceptableValue[]`
`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`
`required`		`boolean` When `true`, indicates that the user must set the value before the owning form can be submitted.

Emits

Event	Type
`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

Slot	Type
`modelValue`	`AcceptableValue \| AcceptableValue[]` The controlled value of the Select. Can be bind as `v-model`.
`open`	`boolean` The controlled open state of the Select. Can be bind as `v-model:open`.

Trigger

The button that toggles the ASelect The ASelectContent will position itself by aligning over the trigger.

Props

Prop	Default	Type
`as`	`'button'`	`APrimitiveAsTag \| 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 Attributes

Attribute	Value
`[data-state]`	`'open' \| 'closed'`
`[data-placeholder]`	Present when has placeholder
`[data-disabled]`	Present when disabled

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.

Props

Prop	Default	Type
`as`	`'span'`	`APrimitiveAsTag \| 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 `ASelectValue` when no `value` or `defaultValue` is set.

Slots

Slot	Type
`selectedLabel`	`string[]`
`modelValue`	`AcceptableValue \| AcceptableValue[]`

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.

Portal

When used, portals the content part into the body.

Props

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+) {@link https://vuejs.org/guide/built-ins/teleport.html#deferred-teleport}
`disabled`		`boolean` When `true`, prevents the user from interacting with Select
`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` {@link https://vuejs.org/guide/built-ins/teleport.html#basic-usage}

Content

The component that pops out when the select is open.

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

Props

Prop	Default	Type
`as`	`'div'`	`APrimitiveAsTag \| Component` The element or component this component should render as. Can be overwritten by `asChild`.
`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.
`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<Side, 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 reference (or anchor) element that is being referred to for positioning. If not provided will use the current component as anchor.
`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`		`'always' \| 'partial'` 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.

Emits

Event	Type
`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 Attributes

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

CSS Variables

Variable	Description
`--akar-select-content-transform-origin`	The `transform-origin` computed from the content and arrow positions/offsets. Only present when `position="popper"`
`--akar-select-content-available-width`	The remaining width between the trigger and the boundary edge. Only present when `position="popper"`
`--akar-select-content-available-height`	The remaining height between the trigger and the boundary edge. Only present when `position="popper"`
`--akar-select-trigger-width`	The width of the trigger. Only present when `position="popper"`
`--akar-select-trigger-height`	The height of the trigger. Only present when `position="popper"`

Viewport

The scrolling viewport that contains all of the items.

Props

Prop	Default	Type
`as`	`'div'`	`APrimitiveAsTag \| 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 `AConfigProvider`.

Item

The component that contains the select items.

Props

Prop	Default	Type
`as`	`'div'`	`APrimitiveAsTag \| 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 Select
`textValue`		`string` Optional text used for typeahead purposes. By default the typeahead behavior will use the `.textContent` of the `ASelectItemText` 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`.

Emits

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

Data Attributes

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.

Props

Prop	Default	Type
`as`	`'span'`	`APrimitiveAsTag \| 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

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.

Props

Prop	Default	Type
`as`	`'span'`	`APrimitiveAsTag \| 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

An optional button used as an affordance to show the viewport overflow as well as functionally enable scrolling upwards.

Props

Prop	Default	Type
`as`	`'div'`	`APrimitiveAsTag \| 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

An optional button used as an affordance to show the viewport overflow as well as functionally enable scrolling downwards.

Props

Prop	Default	Type
`as`	`'div'`	`APrimitiveAsTag \| 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

Used to group multiple items. use in conjunction with ASelectLabel to ensure good accessibility via automatic labelling.

Props

Prop	Default	Type
`as`	`'div'`	`APrimitiveAsTag \| 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

Used to render the label of a group. It won't be focusable using arrow keys.

Props

Prop	Default	Type
`as`	`'div'`	`APrimitiveAsTag \| 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

Used to visually separate items in the ASelect

Props

Prop	Default	Type
`as`	`'div'`	`APrimitiveAsTag \| 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

An optional arrow element to render alongside the content. This can be used to help visually link the trigger with the ASelectContent. Must be rendered inside ASelectContent. Only available when position is set to popper.

Props

Prop	Default	Type
`as`	`'svg'`	`APrimitiveAsTag \| 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.

Examples

Change the positioning mode

By default, ASelect will behave similarly to a native MacOS menu by positioning ASelectContent 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 {
  ASelectContent,
  ASelectPortal,
  ASelectRoot,
  ASelectTrigger,
} from 'akar';
</script>

<template>
  <ASelectRoot>
    <ASelectTrigger>…</ASelectTrigger>
    <ASelectPortal>
      <ASelectContent
        position="popper"
        :side-offset="5"
      >
        …
      </ASelectContent>
    </ASelectPortal>
  </ASelectRoot>
</template>

Constrain the content size

When using position="popper" on ASelectContent, 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 --akar-select-trigger-width and --akar-select-content-available-height to support this. Use them to constrain the content dimensions.

// index.vue
<script setup lang="ts">
import {
  ASelectContent,
  ASelectGroup,
  ASelectItem,
  ASelectItemIndicator,
  ASelectLabel,
  ASelectPortal,
  ASelectRoot,
  ASelectSeparator,
  ASelectTrigger,
} from 'akar';
</script>

<template>
  <ASelectRoot>
    <ASelectTrigger>…</ASelectTrigger>
    <ASelectPortal>
      <ASelectContent
        class="ASelectContent"
        position="popper"
        :side-offset="5"
      >
        …
      </ASelectContent>
    </ASelectPortal>
  </ASelectRoot>
</template>

/* styles.css */
.ASelectContent {
  width: var(--akar-select-trigger-width);
  max-height: var(--akar-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 {
  ASelectContent,
  ASelectGroup,
  ASelectItem,
  ASelectItemIndicator,
  ASelectLabel,
  ASelectPortal,
  ASelectRoot,
  ASelectSeparator,
  ASelectTrigger,
} from 'akar';
</script>

<template>
  <ASelectRoot>
    <ASelectTrigger>…</ASelectTrigger>
    <ASelectPortal>
      <ASelectContent>
        <ASelectViewport>
          <ASelectItem
            class="ASelectItem"
            disabled
          >
            …
          </ASelectItem>
          <ASelectItem>…</ASelectItem>
          <ASelectItem>…</ASelectItem>
        </ASelectViewport>
      </ASelectContent>
    </ASelectPortal>
  </ASelectRoot>
</template>

/* styles.css */
.ASelectItem[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 {
  ASelectContent,
  ASelectGroup,
  ASelectItem,
  ASelectItemIndicator,
  ASelectLabel,
  ASelectPortal,
  ASelectRoot,
  ASelectSeparator,
  ASelectTrigger,
} from 'akar';
import './styles.css';
</script>

<template>
  <ASelectRoot>
    <ASelectTrigger class="ASelectTrigger">
      <ASelectValue placeholder="Pick an option" />
      <ASelectIcon />
    </ASelectTrigger>
    <ASelectPortal>
      <ASelectContent>…</ASelectContent>
    </ASelectPortal>
  </ASelectRoot>
</template>

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

With separators

Use the Separator part to add a separator between items.

<template>
  <ASelectRoot>
    <ASelectTrigger>…</ASelectTrigger>
    <ASelectPortal>
      <ASelectContent>
        <ASelectViewport>
          <ASelectItem>…</ASelectItem>
          <ASelectItem>…</ASelectItem>
          <ASelectItem>…</ASelectItem>
          <ASelectSeparator />
          <ASelectItem>…</ASelectItem>
          <ASelectItem>…</ASelectItem>
        </ASelectViewport>
      </ASelectContent>
    </ASelectPortal>
  </ASelectRoot>
</template>

With grouped items

Use the Group and Label parts to group items in a section.

<template>
  <ASelectRoot>
    <ASelectTrigger>…</ASelectTrigger>
    <ASelectPortal>
      <ASelectContent>
        <ASelectViewport>
          <ASelectGroup>
            <ASelectLabel>Label</ASelectLabel>
            <ASelectItem>…</ASelectItem>
            <ASelectItem>…</ASelectItem>
            <ASelectItem>…</ASelectItem>
          </ASelectGroup>
        </ASelectViewport>
      </ASelectContent>
    </ASelectPortal>
  </ASelectRoot>
</template>

With complex items

You can use custom content in your items.

<script setup lang="ts">
import {
  ASelectContent,
  ASelectGroup,
  ASelectItem,
  ASelectItemIndicator,
  ASelectLabel,
  ASelectPortal,
  ASelectRoot,
  ASelectSeparator,
  ASelectTrigger,
} from 'akar';
</script>

<template>
  <ASelectRoot>
    <ASelectTrigger>…</ASelectTrigger>
    <ASelectPortal>
      <ASelectContent>
        <ASelectViewport>
          <ASelectItem>
            <ASelectItemText>
              <img src="…">
              Adolfo Hess
            </ASelectItemText>
            <ASelectItemIndicator>…</ASelectItemIndicator>
          </ASelectItem>
          <ASelectItem>…</ASelectItem> <ASelectItem>…</ASelectItem>
        </ASelectViewport>
      </ASelectContent>
    </ASelectPortal>
  </ASelectRoot>
</template>

Controlling the value displayed in the trigger

By default the trigger display the selected item's text (no longer automatically render ItemText's content like in v1).

If you need to render other than plain text, you can control the component using v-model props (or accessing ASelectValue's slotProps) and passing slot to ASelectValue. 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>
  <ASelectRoot v-model="value">
    <ASelectTrigger>
      <ASelectValue :aria-label="value">
        {{ countries[value] }}
      </ASelectValue>
      <ASelectIcon />
    </ASelectTrigger>
    <ASelectPortal>
      <ASelectContent>
        <ASelectViewport>
          <ASelectItem value="france">
            <ASelectItemText>France</ASelectItemText>
            <ASelectItemIndicator>…</ASelectItemIndicator>
          </ASelectItem>
          <ASelectItem value="united-kingdom">
            <ASelectItemText>United Kingdom</ASelectItemText>
            <ASelectItemIndicator>…</ASelectItemIndicator>
          </ASelectItem>
          <ASelectItem value="spain">
            <ASelectItemText>Spain</ASelectItemText>
            <ASelectItemIndicator>…</ASelectItemIndicator>
          </ASelectItem>
        </ASelectViewport>
      </ASelectContent>
    </ASelectPortal>
  </ASelectRoot>
</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 {
  ASelectContent,
  ASelectGroup,
  ASelectItem,
  ASelectItemIndicator,
  ASelectLabel,
  ASelectPortal,
  ASelectRoot,
  ASelectSeparator,
  ASelectTrigger,
  ScrollAreaRoot,
  ScrollAreaScrollbar,
  ScrollAreaThumb,
  ScrollAreaViewport,
} from 'akar';
</script>

<template>
  <ASelectRoot>
    <ASelectTrigger>…</ASelectTrigger>
    <ASelectPortal>
      <ASelectContent>
        <ScrollAreaRoot
          class="ScrollAreaRoot"
          type="auto"
        >
          <ASelectViewport as-child>
            <ScrollAreaViewport class="ScrollAreaViewport">
              <StyledItem>…</StyledItem> <StyledItem>…</StyledItem>
              <StyledItem>…</StyledItem>
            </ScrollAreaViewport>
          </ASelectViewport>
          <ScrollAreaScrollbar
            class="ScrollAreaScrollbar"
            orientation="vertical"
          >
            <ScrollAreaThumb class="ScrollAreaThumb" />
          </ScrollAreaScrollbar>
        </ScrollAreaRoot>
      </ASelectContent>
    </ASelectPortal>
  </ASelectRoot>
</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 ASelect-Only Combobox example for more information.

Keyboard Interactions

Key	Description
`Space`	When focus is on `ASelectTrigger`, opens the select and focuses the selected item. When focus is on an item, selects the focused item.
`Enter`	When focus is on `ASelectTrigger`, opens the select and focuses the first item. When focus is on an item, selects the focused item.
`ArrowDown`	When focus is on `ASelectTrigger`, opens the ASelect When focus is on an item, moves focus to the next item.
`ArrowUp`	When focus is on `ASelectTrigger`, opens the ASelect When focus is on an item, moves focus to the previous item.
`Esc`	Closes the select and moves focus to `ASelectTrigger`.

Labelling

Use our Label component in order to offer a visual and accessible label for the ASelect

<script setup lang="ts">
import { Icon } from '@iconify/vue';
import {
  ASelectContent,
  ASelectGroup,
  ASelectItem,
  ASelectItemIndicator,
  ASelectLabel,
  ASelectPortal,
  ASelectRoot,
  ASelectSeparator,
  ASelectTrigger,
  Label,
} from 'akar';
import { ref } from 'vue';
</script>

<template>
  <Label>
    Country
    <ASelectRoot>…</ASelectRoot>
  </Label>

  <!-- or -->

  <Label for="country">Country</Label>
  <ASelectRoot>
    <ASelectTrigger id="country">
      …
    </ASelectTrigger>
    <ASelectPortal>
      <ASelectContent>…</ASelectContent>
    </ASelectPortal>
  </ASelectRoot>
</template>

<script setup lang="ts">
import { ASelect, ASelectItem } from './your-select';
</script>

<template>
  <ASelect default-value="2">
    <ASelectItem value="1">
      Item 1
    </ASelectItem>
    <ASelectItem value="2">
      Item 2
    </ASelectItem>
    <ASelectItem value="3">
      Item 3
    </ASelectItem>
  </ASelect>
</template>

Implementation

// your-select.ts
export { default as ASelect } from 'ASelect.vue';
export { default as ASelectItem } from 'ASelectItem.vue';

<!-- ASelect.vue -->
<script setup lang="ts">
import type { ASelectRootEmits, ASelectRootProps } from 'akar';
import { ChevronDownIcon, ChevronUpIcon, } from '@radix-icons/vue';
import { ASelectContent, ASelectIcon, ASelectPortal, ASelectRoot, ASelectScrollDownButton, ASelectScrollUpButton, ASelectTrigger, ASelectValue, ASelectViewport, useForwardPropsEmits } from 'akar';

const props = defineProps<ASelectRootProps>();
const emits = defineEmits<ASelectRootEmits>();

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

<template>
  <ASelectRoot v-bind="forward">
    <ASelectTrigger>
      <ASelectValue />
      <ASelectIcon>
        <ChevronDownIcon />
      </ASelectIcon>
    </ASelectTrigger>

    <ASelectPortal>
      <ASelectContent>
        <ASelectScrollUpButton>
          <ChevronUpIcon />
        </ASelectScrollUpButton>
        <ASelectViewport>
          <slot />
        </ASelectViewport>
        <ASelectScrollDownButton>
          <ChevronDownIcon />
        </ASelectScrollDownButton>
      </ASelectContent>
    </ASelectPortal>
  </ASelectRoot>
</template>

<!-- ASelectItem.vue -->
<script setup lang="ts">
import type { ASelectItemProps } from 'akar';
import { CheckIcon } from '@radix-icons/vue';
import { ASelectItem, ASelectItemIndicator, ASelectItemText } from 'akar';

const props = defineProps<ASelectItemProps>();
</script>

<template>
  <ASelectItem v-bind="props">
    <ASelectItemText>
      <slot />
    </ASelectItemText>
    <ASelectItemIndicator>
      <CheckIcon />
    </ASelectItemIndicator>
  </ASelectItem>
</template>

Radio Group

A set of radio buttons to select a single option from a list.

Slider

An input to select a numeric value within a range.