ContextQMD
Back to Shark UI

Select

docs/components/select

latest10.4 KB
Original Source

Sections

Components

Utilities

Forms

Hooks

Select

Copy Markdown

Displays a list of options.

DocsAPI

PreviewCode

Select a fruit

BananaAppleOrangePineapple

Installation#

CLIManual

pnpmbunnpmyarn

pnpm dlx shadcn@latest add @shark/select

Anatomy#

Select
├── SelectTrigger
│ └── SelectValue
└── SelectContent
    ├── SelectEmpty
    ├── SelectClearTrigger
    ├── SelectGroup
    │ ├── SelectGroupLabel
    │ └── SelectItem
    └── SelectItem

Usage#

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

const collection = createListCollection({
  items: ["Option 1", "Option 2", "Option 3"],
});

<Select collection={collection}>
  <SelectTrigger>
    <SelectValue placeholder="Select an option" />
  </SelectTrigger>
  <SelectContent>
    {collection.items.map((item) => (
      <SelectItem item={item} key={item}>
        {item}
      </SelectItem>
    ))}
  </SelectContent>
</Select>

Controlled#

Use value and onValueChange to control the selected items.

PreviewCode

React

ReactVueSvelte

Size#

Control trigger size with the size prop on SelectTrigger.

Small#

PreviewCode

Select framework

Next.jsViteESBuild

Medium#

PreviewCode

Select framework

Next.jsViteESBuild

Large#

PreviewCode

Select framework

Next.jsViteESBuild

States#

Disabled#

PreviewCode

Select framework

Next.jsViteAstro

Invalid#

PreviewCode

Select framework

Next.jsViteAstro

Examples#

Multiple#

Enable multiple selection with the multiple prop.

PreviewCode

javascript (+1 more)

JavaScriptTypeScriptPythonRust

Grouping#

Organize options into groups using groupBy and SelectGroup.

PreviewCode

Select framework

Next.jsViteAstroExpressFastifyNestJS

With Field#

Use Field for labels, helper text, and error handling.

PreviewCode

Country

Select a country

BrazilMexicoIreland

Used for shipping estimates

Max Selection#

PreviewCode

Select 3 frameworks

JavaScriptTypeScriptPythonRust

Scrollable#

PreviewCode

Select framework

Framework 1Framework 2Framework 3Framework 4Framework 5Framework 6Framework 7Framework 8Framework 9Framework 10Framework 11Framework 12Framework 13Framework 14Framework 15Framework 16Framework 17Framework 18Framework 19Framework 20

Empty#

Use SelectEmpty to display a message when the collection has no items.

PreviewCode

Select an option

API Reference#

Select#

Root component.

PropTypeDefault
collectionListCollection<T>-
valuestring[]-
defaultValuestring[]-
onValueChange(details: ValueChangeDetails<T>) => void-
multiplebooleanfalse
disabledboolean-
invalidboolean-
namestring-
requiredboolean-
positioningPositioningOptions-
lazyMountbooleantrue
unmountOnExitbooleantrue
classNamestring-

SelectTrigger#

Opens the dropdown on click. Displays the selected value or placeholder.

PropTypeDefault
size`"sm""md"
showClearbooleanfalse
classNamestring-
asChildboolean-

SelectValue#

Shows the selected value or placeholder. Use SelectContext as children for custom display.

PropTypeDefault
placeholderstring-
classNamestring-
asChildboolean-

SelectContent#

Holds the dropdown options. Displayed in a portal.

PropTypeDefault
classNamestring-
asChildboolean-

SelectClearTrigger#

Button to clear the selected value. Shown when showClear is true on SelectTrigger.

PropTypeDefault
classNamestring-
asChildboolean-

SelectGroup#

Groups related options under an optional heading.

PropTypeDefault
headingstringReactNode
classNamestring-
asChildboolean-

SelectGroupLabel#

Label for an option group.

PropTypeDefault
classNamestring-
asChildboolean-

SelectItem#

A single selectable option in the dropdown.

PropTypeDefault
itemT-
classNamestring-
asChildboolean-

SelectEmpty#

Shown when the collection has no items (collection.size === 0). Place inside SelectContent.

PropTypeDefault
classNamestring-

For a complete list of props, see the Ark UI documentation.

[

Previous page

Segment Group ](/docs/components/segment-group)[

Next page

Separator ](/docs/components/separator)

On This Page

InstallationAnatomyUsageControlledSizeSmallMediumLargeStatesDisabledInvalidExamplesMultipleGroupingWith FieldMax SelectionScrollableEmptyAPI ReferenceSelectSelectTriggerSelectValueSelectContentSelectClearTriggerSelectGroupSelectGroupLabelSelectItemSelectEmpty