Select

#Basic usage

Framework

select/basic.vue

<script setup lang="ts">
import { createListCollection } from "@ark-ui/vue/select";
import { check, chevrons_up_down, x } from "@bysages/icons";
import { Icon, Select } from "@bysages/vue";

const collection = createListCollection({
  items: [
    { label: "React", value: "react" },
    { label: "Solid", value: "solid" },
    { label: "Vue", value: "vue" },
    { label: "Svelte", value: "svelte" },
  ],
});
</script>

<template>
  <Select.Root :collection="collection">
    <Select.Label>Framework</Select.Label>
    <Select.Control>
      <Select.Trigger>
        <Select.ValueText placeholder="Select" />
      </Select.Trigger>
      <Select.ClearTrigger>
        <Icon :glyph="x" />
      </Select.ClearTrigger>
      <Select.Indicator>
        <Icon :glyph="chevrons_up_down" />
      </Select.Indicator>
    </Select.Control>
    <Teleport to="body">
      <Select.Positioner>
        <Select.Content>
          <Select.ItemGroup>
            <Select.ItemGroupLabel>Frameworks</Select.ItemGroupLabel>
            <Select.Item v-for="item in collection.items" :key="item.value" :item="item">
              <Select.ItemText>{{ item.label }}</Select.ItemText>
              <Select.ItemIndicator>
                <Icon :glyph="check" />
              </Select.ItemIndicator>
            </Select.Item>
          </Select.ItemGroup>
        </Select.Content>
      </Select.Positioner>
    </Teleport>
    <Select.HiddenSelect />
  </Select.Root>
</template>

select/native Vue React

select/native.vue

<script setup lang="ts">
import { NativeSelect } from "@bysages/vue";
import { ref } from "vue";

const frameworks = [
  { label: "React", value: "react" },
  { label: "Solid", value: "solid" },
  { label: "Vue", value: "vue" },
  { label: "Svelte", value: "svelte" },
];

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

<template>
  <div class="flex w-72 flex-col gap-4">
    <NativeSelect v-model="value" :options="frameworks" placeholder="Choose a framework" />
    <NativeSelect :options="frameworks" model-value="vue" />
  </div>
</template>

#Props

#ClearTrigger

A styled part — no props of its own; it takes the anatomy's shared styling.

#Content

A styled part — no props of its own; it takes the anatomy's shared styling.

#Control

A styled part — no props of its own; it takes the anatomy's shared styling.

#HiddenSelect

A styled part — no props of its own; it takes the anatomy's shared styling.

#Indicator

A styled part — no props of its own; it takes the anatomy's shared styling.

#ItemContext

A styled part — no props of its own; it takes the anatomy's shared styling.

#ItemGroupLabel

A styled part — no props of its own; it takes the anatomy's shared styling.

#ItemGroup

A styled part — no props of its own; it takes the anatomy's shared styling.

#ItemIndicator

A styled part — no props of its own; it takes the anatomy's shared styling.

#ItemText

A styled part — no props of its own; it takes the anatomy's shared styling.

#Item

Prop	Type	Default	Description
`item`	`T`		The item to render
`persistFocus`	`boolean \| undefined`		Whether hovering outside should clear the highlighted state

#Label

A styled part — no props of its own; it takes the anatomy's shared styling.

#List

A styled part — no props of its own; it takes the anatomy's shared styling.

#Positioner

A styled part — no props of its own; it takes the anatomy's shared styling.

#Root

Prop	Type	Default	Description
`size`	`String as PropType<"sm" \| "md" \| "lg">`	`"md"`	One rung of the control-height ladder for the trigger.
`autoComplete`	`string`		The autocomplete attribute for the hidden select. Enables browser autofill (e.g. "address-level1" for state).
`closeOnSelect`	`boolean`	`true`	Whether the select should close after an item is selected
`collection`	`ListCollection<T>`		The collection of items
`composite`	`boolean`	`true`	Whether the select is a composed with other composite widgets like tabs or combobox
`defaultHighlightedValue`	`string`		The initial value of the highlighted item when opened. Use when you don't need to control the highlighted value of the select.
`defaultOpen`	`boolean`		Whether the select's open state is controlled by the user
`defaultValue`	`string[]`		The initial default value of the select when rendered. Use when you don't need to control the value of the select.
`deselectable`	`boolean`		Whether the value can be cleared by clicking the selected item. Note: this is only applicable for single selection
`disabled`	`boolean`		Whether the select is disabled
`form`	`string`		The associate form of the underlying select.
`highlightedValue`	`string`		The controlled key of the highlighted item
`id`	`string`		The unique identifier of the machine.
`ids`	`Partial<{ root: string; content: string; control: string; trigger: string; clearTrigger: string; label: string; hiddenSelect: string; positioner: string; item(id: string \| number): string; itemGroup(id: string \| number): string; itemGroupLabel(id: string \| number): string; }>`		The ids of the elements in the select. Useful for composition.
`invalid`	`boolean`		Whether the select is invalid
`loopFocus`	`boolean`	`false`	Whether to loop the keyboard navigation through the options
`modelValue`	`string[]`		The model value of the select
`multiple`	`boolean`		Whether to allow multiple selection
`name`	`string`		The `name` attribute of the underlying select.
`open`	`boolean`		Whether the select menu is open
`positioning`	`select.PositioningOptions`		The positioning options of the menu.
`readOnly`	`boolean`		Whether the select is read-only
`required`	`boolean`		Whether the select is required
`scrollToIndexFn`	`(details: select.ScrollToIndexDetails) => void`		Function to scroll to a specific index
`translations`	`select.IntlTranslations`		Specifies the localized strings that identifies the accessibility elements and their states

#Trigger

A styled part — no props of its own; it takes the anatomy's shared styling.

#ValueText

Prop	Type	Default	Description
`placeholder`	`string`		—