shadcn.io is not affiliated with official shadcn/ui

Components

Free

Select for Solid

Q: How do I submit a Select with a form?

Set name on Select to the field name the form should receive. The selected value is submitted through a hidden field, so the visible trigger does not have to be a native select, and Select stays inside the form. Set required when a choice is mandatory.

Open a short list of known options from a button and keep the picked label on it. For Solid with Ark UI, when a typed value the server has never seen would be wrong.

Known options live in a closed list. A button opens it and shows the one you picked.

Use it when the list is short enough to scan and people should not type their own value. If they need to filter a long catalog, use a Combobox. In Solid, you hold the chosen value when the form is controlled, and Ark UI shows it on the trigger.

PreviewCode

Installation

Free with an account. It carries your token, so the CLI installs everything in one go.

Google GitHub

Use email insteadNo credit card

Anatomy

SelectRoot
├── SelectLabel
├── SelectClearTrigger
├── SelectItem
│   ├── SelectItemText
│   ├── SelectItemIndicator
│   └── SelectGroup
│       └── SelectGroupLabel
├── SelectList
├── SelectContent
│   └── SelectPositioner
├── SelectTrigger
│   └── SelectIndicator
└── SelectValue

Usage

import { createListCollection } from "@ark-ui/solid/collection";
import {
  Select, SelectContent, SelectGroup, SelectItem, SelectTrigger,
  SelectValue,
} from "@/components/ui/select";

const items = [
  { label: "Apple", value: "apple" },
  { label: "Banana", value: "banana" },
  { label: "Blueberry", value: "blueberry" },
];

const collection = createListCollection({ items });

const SelectDemo = () => (
  <Select collection={collection}>
    <SelectTrigger class="w-48">
      <SelectValue placeholder="Select a fruit" />
    </SelectTrigger>
    <SelectContent>
      <SelectGroup>
        {collection.items.map((item) => (
          <SelectItem item={item} key={item.value}>
            {item.label}
          </SelectItem>
        ))}
      </SelectGroup>
    </SelectContent>
  </Select>
);

Accessibility

Space: When focus is on trigger, opens the select and focuses the first selected item. When focus is on the content, selects the highlighted item.
Enter: When focus is on trigger, opens the select and focuses the first selected item. When focus is on content, selects the focused item.
Arrow Down: When focus is on trigger, opens the select. When focus is on content, moves focus to the next item.
Arrow Up: When focus is on trigger, opens the select. When focus is on content, moves focus to the previous item.
EscEscape: Closes the select and moves focus to trigger.
A-Z: When focus is on trigger, selects the item whose label starts with the typed character. When focus is on the listbox, moves focus to the next item with a label that starts with the typed character.
a-z: When focus is on trigger, selects the item whose label starts with the typed character. When focus is on the listbox, moves focus to the next item with a label that starts with the typed character.
Arrow Left: Move left.
Arrow Right: Move right.
Home: Go to the start.
End: Go to the end.

Demos

Align Item

A switch above the fruit list turns item alignment on and off. On, the open popup lines the selected row up with the trigger. Off, the popup sits against an edge instead, which stays put once the list is long enough to scroll, while item alignment keeps a short list's choice under the pointer. The prop differs by base, and the FAQ on this page names it.

PreviewCode

Groups

Fruits and vegetables are two groups, each with a heading, and a SelectSeparator between them. Group a list when the options are one choice but people scan by category, such as timezones, roles, or cuisines. The separator is only a visual break, not a second label. Skip both when you have a handful of peers and a heading would repeat the field label.

PreviewCode

Scrollable

The list is timezones, grouped by region, and longer than the popup, so the content scrolls rather than growing to fit every zone. Use a scrolling select when the catalog is long but people still choose by looking, not by typing a filter. If they know the name and will type it, a Combobox is faster than hunting through a scroll. Headings still help once the list moves.

PreviewCode

Disabled

disabled on the select keeps the trigger from opening, and the control reads as unavailable. Use it when an earlier answer is missing, or when this user cannot change a value that is already set. Do not disable an option to hide it: remove it, or leave it enabled and explain the constraint. A disabled select still shows its placeholder, so the field does not look missing.

PreviewCode

Invalid

The fruit field is in an error state: a label, an invalid trigger, and a FieldError that says to select a fruit. Use this after submit when a choice was required and none was made. The sentence is the error, and the color only supports it. How you mark the control invalid differs by base, the FAQ names the prop, and the message belongs in a Field.

PreviewCode

Rtl

dir is rtl, and the options are Arabic names for the same fruits. The trigger, the value, and the popup follow that direction, so the text and the indicator start on the right. Set dir on the select when only this field is right-to-left, and on the document when the whole page is. A single control with dir will not fix the headings around it.

PreviewCode

FAQ

How do I control the selected Select value in Solid?

Keep the selection in state and pass it back to Select, or use the default prop when the first choice is enough. The shape of that value depends on the base. The value is a string array, even when one item is selected. Pass value and read details.value from onValueChange, pass defaultValue as that same array for the first paint, and build options with createListCollection, pass collection, and set item on each SelectItem.

How do I show a placeholder in a Select?

The empty label is not a selected value. Show it until someone chooses an item, then replace it with the item label, so people can tell the prompt from a real choice. Set placeholder on SelectValue. It is shown only while nothing is selected.

How do I align a Select popup with Ark UI?

The popup can line the selected item up with the trigger, or sit against an edge. The Align Item demo is the place to compare those, except on React Aria, which only anchors the popup. Set data-align-trigger on SelectContent to line the selected item up with the trigger. Turn it off for edge alignment.

How do I submit a Select with a form?

Set name on Select to the field name the form should receive. The selected value is submitted through a hidden field, so the visible trigger does not have to be a native select, and Select stays inside the form. Set required when a choice is mandatory.

How do I show a Select as invalid?

Pair the control with Field so the message sits under the trigger, and keep that message in text because color alone is not the error. The Invalid demo is the pattern to copy. Set data-invalid on Field and aria-invalid on SelectTrigger.

Should I use a Select, a Combobox, or a Native Select?

Use Select for one choice from a list that stays closed until it is opened. Use a Combobox when people need to type and filter. Use a Native Select when you want the browser's own menu, which is often the better control on a phone.

Can I use a Select from the keyboard?

Yes. From the trigger, Enter, Space, or Arrow Down opens the list. Arrow keys move between items, Enter or Space selects the highlighted one, and Escape closes the list and returns focus to the trigger. Typing a letter moves to a label that starts with that letter.

How do I install Select in Solid?

Run the command in the Installation section above. It adds Select and its parts to your ui folder. Import from that folder when the command finishes, instead of copying the source by hand, and rerun the command later if you want the latest files. The command uses the shadcn CLI.

API Reference

Select

<div> data-slot="select"

PropType

open?boolean

Whether the select menu is open.

defaultOpen?boolean

Whether the select's open state is controlled by the user.

onOpenChange?(details: OpenChangeDetails) → void

Function called when the popup is opened.

Type: (details: OpenChangeDetails) → void
Parameters: details – { open: boolean; value: string[] }
Returns: void

value?string[]

The controlled keys of the selected items.

defaultValue?string[]

The initial default value of the select when rendered. Use when you don't need to control the value of the select.

onValueChange?(details: ValueChangeDetails<T>) → void

The callback fired when the selected item changes.

Type: (details: ValueChangeDetails<T>) → void
Parameters: details – ValueChangeDetails<T>
Returns: void

collectionListCollection<T>

The collection of items.

Type: ListCollection<T>

autoComplete?string

The autocomplete attribute for the hidden select. Enables browser autofill (e.g. "address-level1" for state).

closeOnSelect?boolean

Whether the select should close after an item is selected.

Default: true

composite?boolean

Whether the select is a composed with other composite widgets like tabs or combobox.

Default: true

defaultHighlightedValue?string | null

The initial value of the highlighted item when opened. Use when you don't need to control the highlighted value of the select.

Type: string | null

deselectable?boolean

Whether the value can be cleared by clicking the selected item. **Note:** this is only applicable for single selection

dir?"ltr" | "rtl"

The document's text/writing direction.

Type: "ltr" | "rtl"
Default: "ltr"

disabled?boolean

Whether the select is disabled.

form?string

The associate form of the underlying select.

hideMode?"display-none" | "activity"

How to hide content when mounted but not present. - display-none: HTML hidden attribute. Effects stay alive. - activity: React 19 <Activity mode="hidden">. Effects pause. Requires React 19+.

Type: "display-none" | "activity"
Default: "display-none"

highlightedValue?string | null

The controlled key of the highlighted item.

Type: string | null

id?string

The unique identifier of the machine.

ids?object

The ids of the elements in the select. Useful for composition.

Type: { 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 }

invalid?boolean

Whether the select is invalid.

lazyMount?boolean

Whether to enable lazy mounting. Ark default: false.

Default: true

loopFocus?boolean

Whether to loop the keyboard navigation through the options.

Default: false

multiple?boolean

Whether to allow multiple selection.

name?string

The name attribute of the underlying select.

onFocusOutside?(event: FocusOutsideEvent) → void

Function called when the focus is moved outside the component.

Type: (event: FocusOutsideEvent) → void
Parameters: event – FocusOutsideEvent
Returns: void

onHighlightChange?(details: HighlightChangeDetails<T>) → void

The callback fired when the highlighted item changes.

Type: (details: HighlightChangeDetails<T>) → void
Parameters: details – HighlightChangeDetails<T>
Returns: void

onInteractOutside?(event: InteractOutsideEvent) → void

Function called when an interaction happens outside the component.

Type: (event: InteractOutsideEvent) → void
Parameters: event – InteractOutsideEvent
Returns: void

onPointerDownOutside?(event: PointerDownOutsideEvent) → void

Function called when the pointer is pressed down outside the component.

Type: (event: PointerDownOutsideEvent) → void
Parameters: event – PointerDownOutsideEvent
Returns: void

onSelect?(details: SelectionDetails) → void

Function called when an item is selected.

Type: (details: SelectionDetails) → void
Parameters: details – { value: string }
Returns: void

positioning?object

The positioning options of the menu.

Type: { restoreStyles?: boolean; applyStyles?: boolean; hideWhenDetached?: boolean; strategy?: "absolute" | "fixed"; placement?: Placement; offset?: { mainAxis?: number; crossAxis?: number; }; gutter?: number; shift?: number; overflowPadding?: number; arrowPadding?: number; flip?: boolean | Placement[]; slide?: boolean; overlap?: boolean; sameWidth?: boolean; fitViewport?: boolean; sizeMiddleware?: boolean; boundary?: (() → Boundary) | Boundary | "clipping-ancestors"; listeners?: boolean | AutoUpdateOptions; onComplete?: (data: ComputePositionReturn) → void; onPositioned?: ((data: { placed: boolean; }) → void); getAnchorElement?: () → HTMLElement | VirtualElement | null; getAnchorRect?: (element: HTMLElement | VirtualElement | null) → AnchorRect | null; updatePosition?: ((data: { updatePosition: () → Promise<void>; floatingElement: HTMLElement | null; }) → void | Promise<void>) }

readOnly?boolean

Whether the select is read-only.

required?boolean

Whether the select is required.

scrollToIndexFn?(details: ScrollToIndexDetails) → void

Function to scroll to a specific index.

Type: (details: ScrollToIndexDetails) → void
Parameters: details – { index: number; immediate?: boolean; getElement: () → HTMLElement | null }
Returns: void

skipAnimationOnMount?boolean

Whether to allow the initial presence animation.

Default: false

translations?object

Specifies the localized strings that identifies the accessibility elements and their states.

Type: { clearTriggerLabel?: string }

unmountOnExit?boolean

Whether to unmount on exit. Ark default: false.

Default: true

asChild?(props: ParentProps) => JSX.Element

Render your own element: a function that gets the part's props to spread on it.

Type: (props: ParentProps) => JSX.Element

AttributeType

data-invalid?string

Present when invalid.

data-readonly?string

Present when read-only.

SelectPositioner

<div> data-slot="select-positioner"

PropType

asChild?(props: ParentProps) => JSX.Element

Render your own element: a function that gets the part's props to spread on it.

Type: (props: ParentProps) => JSX.Element

AttributeType

data-has-nested?string

Present when the positioner has nested selects.

data-nested?string

Present when the positioner is nested within another select.

CSS variableType

--available-heightstring

The available height in viewport.

--available-widthstring

The available width in viewport.

--reference-heightstring

The height of the root.

--reference-widthstring

The width of the reference element.

--transform-originstring

The transform origin for animations.

--xstring

The x position for transform.

--ystring

The y position for transform.

--z-indexstring

The z-index value.

SelectTrigger

<button> data-slot="select-trigger"

PropType

showClear?boolean

Show clear trigger.

Default: false

size?"sm" | "md" | "default"

The size.

Type: "sm" | "md" | "default"
Default: "md"

asChild?(props: ParentProps) => JSX.Element

Render your own element: a function that gets the part's props to spread on it.

Type: (props: ParentProps) => JSX.Element

class?string

Merged with the part's classes.

AttributeType

data-disabled?string

Present when disabled.

data-invalid?string

Present when invalid.

data-placeholder-shown?string

Present when placeholder is shown.

data-placementstring

The placement of the trigger.

data-readonly?string

Present when read-only.

data-side"top" | "right" | "bottom" | "left"

The side of the trigger that the trigger is positioned on.

Type: "top" | "right" | "bottom" | "left"

data-size?string

data-state"open" | "closed"

"open" or "closed".

Type: "open" | "closed"

SelectIndicator

<div> data-slot="select-indicator"

PropType

asChild?(props: ParentProps) => JSX.Element

Render your own element: a function that gets the part's props to spread on it.

Type: (props: ParentProps) => JSX.Element

AttributeType

data-disabled?string

Present when disabled.

data-invalid?string

Present when invalid.

data-readonly?string

Present when read-only.

data-state"open" | "closed"

"open" or "closed".

Type: "open" | "closed"

SelectClearTrigger

<button> data-slot="select-clear-trigger"

PropType

asChild?(props: ParentProps) => JSX.Element

Render your own element: a function that gets the part's props to spread on it.

Type: (props: ParentProps) => JSX.Element

class?string

Merged with the part's classes.

AttributeType

data-invalid?string

Present when invalid.

SelectItem

<div> data-slot="select-item"

PropType

itemT

The item to render.

persistFocus?boolean

Whether hovering outside should clear the highlighted state.

asChild?(props: ParentProps) => JSX.Element

Render your own element: a function that gets the part's props to spread on it.

Type: (props: ParentProps) => JSX.Element

class?string

Merged with the part's classes.

AttributeType

data-disabled?string

Present when disabled.

data-highlighted?string

Present when highlighted.

data-state"checked" | "unchecked"

"checked" or "unchecked".

Type: "checked" | "unchecked"

data-valueboolean

The value of the item.

SelectItemText

<span> data-slot="select-item-text"

PropType

asChild?(props: ParentProps) => JSX.Element

Render your own element: a function that gets the part's props to spread on it.

Type: (props: ParentProps) => JSX.Element

AttributeType

data-disabled?string

Present when disabled.

data-highlighted?string

Present when highlighted.

data-state"checked" | "unchecked"

"checked" or "unchecked".

Type: "checked" | "unchecked"

SelectItemIndicator

<div> data-slot="select-item-indicator"

PropType

asChild?(props: ParentProps) => JSX.Element

Render your own element: a function that gets the part's props to spread on it.

Type: (props: ParentProps) => JSX.Element

AttributeType

data-state"checked" | "unchecked"

"checked" or "unchecked".

Type: "checked" | "unchecked"

SelectGroup

<div> data-slot="select-group"

PropType

heading?string | JSX.Element

The heading of the group.

Type: string | JSX.Element

asChild?(props: ParentProps) => JSX.Element

Render your own element: a function that gets the part's props to spread on it.

Type: (props: ParentProps) => JSX.Element

class?string

Merged with the part's classes.

AttributeType

data-disabled?string

Present when disabled.

SelectGroupLabel

<div> data-slot="select-label"

PropType

asChild?(props: ParentProps) => JSX.Element

Render your own element: a function that gets the part's props to spread on it.

Type: (props: ParentProps) => JSX.Element

class?string

Merged with the part's classes.

SelectContent

<div> data-slot="select-content"

PropType

asChild?(props: ParentProps) => JSX.Element

Render your own element: a function that gets the part's props to spread on it.

Type: (props: ParentProps) => JSX.Element

class?string

Merged with the part's classes.

AttributeType

data-activedescendantstring

Mirrors ariaActiveDescendant.

data-has-nested?string

Present when another listbox is nested inside it.

data-nested?string

Present when it's nested inside another listbox.

data-placementstring

The placement of the content.

data-side"top" | "right" | "bottom" | "left"

The side of the trigger that the content is positioned on.

Type: "top" | "right" | "bottom" | "left"

data-state"open" | "closed"

"open" or "closed".

Type: "open" | "closed"

CSS variableType

--available-heightstring

The height left between the anchor and the viewport's edge.

--layer-indexstring

The index of the dismissable in the layer stack.

--nested-layer-countstring

The number of nested selects.

--reference-widthstring

The trigger's width.

--transform-originstring

Where the content scales from, on its trigger's side.

SelectControl

<div> data-slot="select-control"

PropType

asChild?(props: ParentProps) => JSX.Element

Render your own element: a function that gets the part's props to spread on it.

Type: (props: ParentProps) => JSX.Element

AttributeType

data-disabled?string

Present when disabled.

data-focus?string

Present when focused.

data-invalid?string

Present when invalid.

data-state"open" | "closed"

"open" or "closed".

Type: "open" | "closed"

SelectValue

<span> data-slot="select-value"

PropType

placeholder?string

Text to display when no value is selected.

asChild?(props: ParentProps) => JSX.Element

Render your own element: a function that gets the part's props to spread on it.

Type: (props: ParentProps) => JSX.Element

class?string

Merged with the part's classes.

AttributeType

data-disabled?string

Present when disabled.

data-focus?string

Present when focused.

data-invalid?string

Present when invalid.

SelectSeparator

data-slot="select-separator"

PropType

orientation?"horizontal" | "vertical"

The orientation of the separator.

Type: "horizontal" | "vertical"
Default: "horizontal"

asChild?(props: ParentProps) => JSX.Element

Render your own element: a function that gets the part's props to spread on it.

Type: (props: ParentProps) => JSX.Element

class?string

Merged with the part's classes.

AttributeType

data-invalid?string

Present when invalid is true.

data-readonly?string

Present when readOnly is true.

SelectEmpty

<div>

PropType

asChild?(props: ParentProps) => JSX.Element

Render your own element: a function that gets the part's props to spread on it.

Type: (props: ParentProps) => JSX.Element

class?string

Merged with the part's classes.

AttributeType

data-invalid?string

Present when invalid is true.

data-readonly?string

Present when readOnly is true.

useSelect

PropType

open?boolean

Whether the select menu is open.

defaultOpen?boolean

Whether the select's open state is controlled by the user.

onOpenChange?(details: OpenChangeDetails) → void

Function called when the popup is opened.

Type: (details: OpenChangeDetails) → void
Parameters: details – { open: boolean; value: string[] }
Returns: void

value?string[]

The controlled keys of the selected items.

defaultValue?string[]

The initial default value of the select when rendered. Use when you don't need to control the value of the select.

onValueChange?(details: ValueChangeDetails<T>) → void

The callback fired when the selected item changes.

Type: (details: ValueChangeDetails<T>) → void
Parameters: details – ValueChangeDetails<T>
Returns: void

collectionListCollection<T>

The collection of items.

Type: ListCollection<T>

autoComplete?string

The autocomplete attribute for the hidden select. Enables browser autofill (e.g. "address-level1" for state).

closeOnSelect?boolean

Whether the select should close after an item is selected.

Default: true

composite?boolean

Whether the select is a composed with other composite widgets like tabs or combobox.

Default: true

defaultHighlightedValue?string | null

The initial value of the highlighted item when opened. Use when you don't need to control the highlighted value of the select.

Type: string | null

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 | null

The controlled key of the highlighted item.

Type: string | null

id?string

The unique identifier of the machine.

ids?object

The ids of the elements in the select. Useful for composition.

Type: { 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 }

invalid?boolean

Whether the select is invalid.

loopFocus?boolean

Whether to loop the keyboard navigation through the options.

Default: false

multiple?boolean

Whether to allow multiple selection.

name?string

The name attribute of the underlying select.

onFocusOutside?(event: FocusOutsideEvent) → void

Function called when the focus is moved outside the component.

Type: (event: FocusOutsideEvent) → void
Parameters: event – FocusOutsideEvent
Returns: void

onHighlightChange?(details: HighlightChangeDetails<T>) → void

The callback fired when the highlighted item changes.

Type: (details: HighlightChangeDetails<T>) → void
Parameters: details – HighlightChangeDetails<T>
Returns: void

onInteractOutside?(event: InteractOutsideEvent) → void

Function called when an interaction happens outside the component.

Type: (event: InteractOutsideEvent) → void
Parameters: event – InteractOutsideEvent
Returns: void

onPointerDownOutside?(event: PointerDownOutsideEvent) → void

Function called when the pointer is pressed down outside the component.

Type: (event: PointerDownOutsideEvent) → void
Parameters: event – PointerDownOutsideEvent
Returns: void

onSelect?(details: SelectionDetails) → void

Function called when an item is selected.

Type: (details: SelectionDetails) → void
Parameters: details – { value: string }
Returns: void

positioning?object

The positioning options of the menu.

Type: { restoreStyles?: boolean; applyStyles?: boolean; hideWhenDetached?: boolean; strategy?: "absolute" | "fixed"; placement?: Placement; offset?: { mainAxis?: number; crossAxis?: number; }; gutter?: number; shift?: number; overflowPadding?: number; arrowPadding?: number; flip?: boolean | Placement[]; slide?: boolean; overlap?: boolean; sameWidth?: boolean; fitViewport?: boolean; sizeMiddleware?: boolean; boundary?: (() → Boundary) | Boundary | "clipping-ancestors"; listeners?: boolean | AutoUpdateOptions; onComplete?: (data: ComputePositionReturn) → void; onPositioned?: ((data: { placed: boolean; }) → void); getAnchorElement?: () → HTMLElement | VirtualElement | null; getAnchorRect?: (element: HTMLElement | VirtualElement | null) → AnchorRect | null; updatePosition?: ((data: { updatePosition: () → Promise<void>; floatingElement: HTMLElement | null; }) → void | Promise<void>) }

readOnly?boolean

Whether the select is read-only.

required?boolean

Whether the select is required.

scrollToIndexFn?(details: ScrollToIndexDetails) → void

Function to scroll to a specific index.

Type: (details: ScrollToIndexDetails) → void
Parameters: details – { index: number; immediate?: boolean; getElement: () → HTMLElement | null }
Returns: void

translations?object

Specifies the localized strings that identifies the accessibility elements and their states.

Type: { clearTriggerLabel?: string }

SelectContext

PropType

clearHighlightValueVoidFunction

Function to clear the highlighted value.

clearValue(value?: string) → void

Function to clear the value of the select. If a value is provided, it will only clear that value, otherwise, it will clear all values.

Parameters: value? – string
Returns: void

collectionListCollection<V>

Function to toggle the select.

Type: ListCollection<V>

disabledboolean

Whether the select is disabled.

emptyboolean

Whether the select value is empty.

focusVoidFunction

Function to focus on the select input.

focusedboolean

Whether the select is focused.

getItemState(props: ItemProps) → ItemState

Returns the state of a select item.

Parameters: props – { item: T; persistFocus?: boolean }
Returns: ItemState

hasSelectedItemsboolean

Whether there's a selected option.

highlightedItemV | null

The highlighted item.

Type: V | null

highlightedValuestring | null

The value of the highlighted item.

Type: string | null

multipleboolean

Whether the select allows multiple selections.

openboolean

Whether the select is open.

reposition(options?: Partial<PositioningOptions>) → void

Function to set the positioning options of the select.

Type: (options?: Partial<PositioningOptions>) → void
Parameters: options? – Partial<PositioningOptions>
Returns: void

selectAllVoidFunction

Function to select all values.

selectedItemsV[]

The selected items.

selectValue(value: string) → void

Function to select a value.

Parameters: value – string
Returns: void

setHighlightValue(value: string) → void

Function to highlight a value.

Parameters: value – string
Returns: void

setOpen(open: boolean) → void

Function to open or close the select.

Parameters: open – boolean
Returns: void

setValue(value: string[]) → void

Function to set the value of the select.

Parameters: value – string[]
Returns: void

valuestring[]

The selected item keys.

valueAsStringstring

The string representation of the selected items.

With other components

Field
Inputs
Label, description, error
Label
Inputs
Name the trigger
Input
Inputs
Same form row
Button Group
Buttons
Compact filter bar
Card
Layout
Settings on a card
Tooltip
Overlays
Why an option is disabled

Native Select
Selection
Phone system picker
Combobox
Selection
Search a long list
Dropdown Menu
Menus
Actions, not values
Command
Overlays
Palette with search
Radio Group
Selection
Every option visible
Direction
Layout
RTL for the page

All 100 components

Installation

Anatomy

Usage

Accessibility

Demos

Align Item

Groups

Scrollable

Disabled

Invalid

Rtl

FAQ

How do I control the selected Select value in Solid?

How do I show a placeholder in a Select?

How do I align a Select popup with Ark UI?

How do I submit a Select with a form?

How do I show a Select as invalid?

Should I use a Select, a Combobox, or a Native Select?

Can I use a Select from the keyboard?

How do I install Select in Solid?

API Reference

Select

SelectPositioner

SelectTrigger

SelectIndicator

SelectClearTrigger

SelectItem

SelectItemText

SelectItemIndicator

SelectGroup

SelectGroupLabel

SelectContent

SelectControl

SelectValue

SelectSeparator

SelectEmpty

useSelect

SelectContext

With other components

Related