Select

Storybook

Go to Story

useSelectContext()

function useSelectContext(): object;

Defined in: src/components/Select/Select.tsx:44

Hook to access the Select context. Must be used within a Select component.

Returns

object

Name	Type	Defined in
open	boolean	src/components/Select/Select.tsx:181
setOpen	Dispatch<SetStateAction<boolean>>	src/components/Select/Select.tsx:182
selectedValue	string | undefined	src/components/Select/Select.tsx:183
selectValue()	(newValue) => void	src/components/Select/Select.tsx:184
items	Map<string, ItemsMapValue>	src/components/Select/Select.tsx:185
onItemAdded()	(itemValue, value) => void	src/components/Select/Select.tsx:186
create	CreateProp | null	src/components/Select/Select.tsx:187
search	| { placeholder: string; emptyMessage: string; } | null	src/components/Select/Select.tsx:188
disabled	boolean | undefined	src/components/Select/Select.tsx:189
formatValue	(value) => ReactNode | undefined	src/components/Select/Select.tsx:190

Throws

If used outside a Select component.

---

useSelectProvider()

function useSelectProvider(__namedParameters): object;

Defined in: src/components/Select/Select.tsx:145

Hook that manages Select component state and behavior.

Parameters

Parameter	Type
__namedParameters	SelectContextProps

Returns

object

Name	Type	Defined in
open	boolean	src/components/Select/Select.tsx:181
setOpen	Dispatch<SetStateAction<boolean>>	src/components/Select/Select.tsx:182
selectedValue	string | undefined	src/components/Select/Select.tsx:183
selectValue()	(newValue) => void	src/components/Select/Select.tsx:184
items	Map<string, ItemsMapValue>	src/components/Select/Select.tsx:185
onItemAdded()	(itemValue, value) => void	src/components/Select/Select.tsx:186
create	CreateProp | null	src/components/Select/Select.tsx:187
search	| { placeholder: string; emptyMessage: string; } | null	src/components/Select/Select.tsx:188
disabled	boolean | undefined	src/components/Select/Select.tsx:189
formatValue	(value) => ReactNode | undefined	src/components/Select/Select.tsx:190

---

Select()

function Select(__namedParameters): Element;

Defined in: src/components/Select/Select.tsx:302

Root component that provides context for building a single-select input with search and create capabilities.

Compose with SelectTrigger, SelectValue, and SelectContent.

Parameters

Parameter	Type
__namedParameters	SelectProps

Returns

Element

Examples

// Basic usage
<Select>
  <SelectTrigger className="w-full max-w-[400px]">
    <SelectValue placeholder="Select fruit..." />
  </SelectTrigger>
  <SelectContent>
    <SelectGroup>
      <SelectItem value="apple">Apple</SelectItem>
      <SelectItem value="banana">Banana</SelectItem>
    </SelectGroup>
  </SelectContent>
</Select>

// With search enabled
<Select search>
  <SelectTrigger>
    <SelectValue placeholder="Search fruits..." />
  </SelectTrigger>
  <SelectContent>
    <SelectGroup>
      <SelectItem value="apple">Apple</SelectItem>
      <SelectItem value="banana">Banana</SelectItem>
      <SelectItem value="orange">Orange</SelectItem>
    </SelectGroup>
  </SelectContent>
</Select>

// With custom search configuration
<Select
  search={{
    placeholder: "Type to search...",
    emptyMessage: "No fruits found."
  }}
>
  <SelectTrigger>
    <SelectValue placeholder="Select fruit..." />
  </SelectTrigger>
  <SelectContent>
    <SelectItem value="apple">Apple</SelectItem>
  </SelectContent>
</Select>

// With create option enabled
<Select
  search
  create
>
  <SelectTrigger>
    <SelectValue placeholder="Select or create..." />
  </SelectTrigger>
  <SelectContent>
    <SelectItem value="apple">Apple</SelectItem>
  </SelectContent>
</Select>

// With custom create option and formatValue
<Select
  search
  create={{
    onCreateOption: (value) => console.log("Created:", value),
    render: (search) => `Add "${search}" as new option`
  }}
  formatValue={(value) => `Custom: ${value}`}
>
  <SelectTrigger>
    <SelectValue placeholder="Select or create..." />
  </SelectTrigger>
  <SelectContent>
    <SelectItem value="existing">Existing Option</SelectItem>
  </SelectContent>
</Select>

// Controlled usage
const [value, setValue] = useState("apple");

<Select value={value} onValueChange={setValue}>
  <SelectTrigger>
    <SelectValue placeholder="Select fruit..." />
  </SelectTrigger>
  <SelectContent>
    <SelectItem value="apple">Apple</SelectItem>
    <SelectItem value="banana">Banana</SelectItem>
  </SelectContent>
</Select>

---

SelectTrigger()

function SelectTrigger(__namedParameters): Element;

Defined in: src/components/Select/Select.tsx:328

Clickable trigger element that opens the selection popover.

Renders like an input using the Button component. Place SelectValue inside to show selected item.

Parameters

Parameter	Type
__namedParameters	SelectTriggerProps

Returns

Element

Example

<SelectTrigger>
  <SelectValue placeholder="Choose an option..." />
</SelectTrigger>

---

SelectValue()

function SelectValue(__namedParameters): Element;

Defined in: src/components/Select/Select.tsx:377

Displays the current selection inside the trigger.

Parameters

Parameter	Type
__namedParameters	SelectValueProps

Returns

Element

Example

<SelectTrigger>
  <SelectValue placeholder="Select a tag..." />
</SelectTrigger>

---

SelectContent()

function SelectContent(__namedParameters): Element;

Defined in: src/components/Select/Select.tsx:468

Popover content that renders the Command-based searchable list of items.

Automatically includes search input and create option if enabled via the parent Select component.

Parameters

Parameter	Type
__namedParameters	SelectContentProps

Returns

Element

Examples

<SelectContent>
  <SelectGroup>
    <SelectItem value="apple">Apple</SelectItem>
    <SelectItem value="banana">Banana</SelectItem>
  </SelectGroup>
</SelectContent>

// With groups and separator
<SelectContent>
  <SelectGroup heading="Fruits">
    <SelectItem value="apple">Apple</SelectItem>
  </SelectGroup>
  <SelectSeparator />
  <SelectGroup heading="Vegetables">
    <SelectItem value="carrot">Carrot</SelectItem>
  </SelectGroup>
</SelectContent>

---

SelectItem()

function SelectItem(__namedParameters): Element;

Defined in: src/components/Select/Select.tsx:549

Selectable item within the list.

Displays a checkmark when selected and handles selection state automatically.

Parameters

Parameter	Type
__namedParameters	SelectItemProps

Returns

Element

Examples

<SelectItem value="apple">Apple</SelectItem>

<SelectItem
  value="banana"
  onSelect={(value) => console.log("Selected:", value)}
>
  Banana
</SelectItem>

---

SelectGroup()

function SelectGroup(props): Element;

Defined in: src/components/Select/Select.tsx:595

Group wrapper for grouping related SelectItems under a heading.

Parameters

Parameter	Type
props	Children & Omit<Pick<Pick<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof HTMLAttributes<HTMLDivElement>> & object & object, "key" | keyof HTMLAttributes<HTMLDivElement> | "asChild">, "value" | "heading"> & object & RefAttributes<HTMLDivElement>

Returns

Element

Example

<SelectGroup heading="Fruits">
  <SelectItem value="apple">Apple</SelectItem>
</SelectGroup>

---

SelectSeparator()

function SelectSeparator(props): Element;

Defined in: src/components/Select/Select.tsx:611

Visual separator between groups or sections in the list.

Parameters

Parameter	Type
props	Pick<Pick<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof HTMLAttributes<HTMLDivElement>> & object & object, "key" | keyof HTMLAttributes<HTMLDivElement> | "asChild"> & object & RefAttributes<HTMLDivElement>

Returns

Element

Example

<>
  <SelectGroup heading="A" />
  <SelectSeparator />
  <SelectGroup heading="B" />
</>

---

SelectCreateItem()

function SelectCreateItem(__namedParameters): Element;

Defined in: src/components/Select/Select.tsx:620

Component that renders the "create new option" item when the create feature is enabled.

Parameters

Parameter	Type
__namedParameters	SelectCreateItemProps

Returns

Element