Select

Displays a list of options for the user to pick from—triggered by a button.

Select

import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectTrigger, SelectValue } from "@/components/optics/select";<Select defaultValue="apple">  <SelectTrigger variant="raised">    <SelectValue placeholder="Select a fruit" />  </SelectTrigger>  <SelectContent>    <SelectGroup>      <SelectLabel>        Fruits      </SelectLabel>      <SelectItem value="apple">        Apple      </SelectItem>      <SelectItem value="banana">        Banana      </SelectItem>      <SelectItem value="blueberry">        Blueberry      </SelectItem>      <SelectItem value="grapes">        Grapes      </SelectItem>      <SelectItem value="pineapple">        Pineapple      </SelectItem>    </SelectGroup>  </SelectContent></Select>

import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectTrigger, SelectValue } from "@/components/optics/select";<Select defaultValue="apple">  <SelectTrigger variant="raised">    <SelectValue placeholder="Select a fruit" />  </SelectTrigger>  <SelectContent>    <SelectGroup>      <SelectLabel>        Fruits      </SelectLabel>      <SelectItem value="apple">        Apple      </SelectItem>      <SelectItem value="banana">        Banana      </SelectItem>      <SelectItem value="blueberry">        Blueberry      </SelectItem>      <SelectItem value="grapes">        Grapes      </SelectItem>      <SelectItem value="pineapple">        Pineapple      </SelectItem>    </SelectGroup>  </SelectContent></Select>

Installation

pnpm dlx shadcn@latest add @optics/select

Props

Name	Type
side	string(default: bottom)
sideOffset	number(default: 4)
align	string(default: center)
alignOffset	number(default: 0)
alignItemWithTrigger	boolean(default: false)
inputRef	React.Ref<HTMLInputElement>
highlightItemOnHover	boolean
defaultOpen	boolean
onOpenChange	(...args) => void
onOpenChangeComplete	((open: boolean) => void)
open	boolean
modal	boolean
items	Array<{label, value}> \| Record<string, ReactNode>
itemToStringLabel	((itemValue: Value) => string)
itemToStringValue	((itemValue: Value) => string)
isItemEqualToValue	((itemValue: Value, value: Value) => boolean)
onValueChange	(...args) => void
nativeButton	boolean
render	React.ReactElement
container	HTMLElement \| RefObject<HTMLElement>
anchor	(...args) => Element
positionMethod	"absolute" \| "fixed"
sticky	boolean
arrowPadding	number
disableAnchorTracking	boolean
label	string
keepMounted	boolean

Name	Type
inputRef	React.Ref<HTMLInputElement>
highlightItemOnHover	boolean
defaultOpen	boolean
onOpenChange	(...args) => void
onOpenChangeComplete	((open: boolean) => void)
open	boolean
modal	boolean
items	Array<{label, value}> \| Record<string, ReactNode>
itemToStringLabel	((itemValue: Value) => string)
itemToStringValue	((itemValue: Value) => string)
isItemEqualToValue	((itemValue: Value, value: Value) => boolean)
onValueChange	(...args) => void
nativeButton	boolean
render	React.ReactElement
container	HTMLElement \| RefObject<HTMLElement>
alignItemWithTrigger	boolean
anchor	(...args) => Element
positionMethod	"absolute" \| "fixed"
sideOffset	number
alignOffset	number
sticky	boolean
arrowPadding	number
disableAnchorTracking	boolean
label	string
keepMounted	boolean

Name	Type
inputRef	React.Ref<HTMLInputElement>
highlightItemOnHover	boolean
defaultOpen	boolean
onOpenChange	(...args) => void
onOpenChangeComplete	((open: boolean) => void)
open	boolean
modal	boolean
items	Array<{label, value}> \| Record<string, ReactNode>
itemToStringLabel	((itemValue: Value) => string)
itemToStringValue	((itemValue: Value) => string)
isItemEqualToValue	((itemValue: Value, value: Value) => boolean)
onValueChange	(...args) => void
nativeButton	boolean
render	React.ReactElement
container	HTMLElement \| RefObject<HTMLElement>
alignItemWithTrigger	boolean
anchor	(...args) => Element
positionMethod	"absolute" \| "fixed"
sideOffset	number
alignOffset	number
sticky	boolean
arrowPadding	number
disableAnchorTracking	boolean
label	string
keepMounted	boolean

Name	Type
inputRef	React.Ref<HTMLInputElement>
highlightItemOnHover	boolean
defaultOpen	boolean
onOpenChange	(...args) => void
onOpenChangeComplete	((open: boolean) => void)
open	boolean
modal	boolean
items	Array<{label, value}> \| Record<string, ReactNode>
itemToStringLabel	((itemValue: Value) => string)
itemToStringValue	((itemValue: Value) => string)
isItemEqualToValue	((itemValue: Value, value: Value) => boolean)
onValueChange	(...args) => void
nativeButton	boolean
render	React.ReactElement
container	HTMLElement \| RefObject<HTMLElement>
alignItemWithTrigger	boolean
anchor	(...args) => Element
positionMethod	"absolute" \| "fixed"
sideOffset	number
alignOffset	number
sticky	boolean
arrowPadding	number
disableAnchorTracking	boolean
label	string
keepMounted	boolean

Name	Type
inputRef	React.Ref<HTMLInputElement>
highlightItemOnHover	boolean
defaultOpen	boolean
onOpenChange	(...args) => void
onOpenChangeComplete	((open: boolean) => void)
open	boolean
modal	boolean
items	Array<{label, value}> \| Record<string, ReactNode>
itemToStringLabel	((itemValue: Value) => string)
itemToStringValue	((itemValue: Value) => string)
isItemEqualToValue	((itemValue: Value, value: Value) => boolean)
onValueChange	(...args) => void
nativeButton	boolean
render	React.ReactElement
container	HTMLElement \| RefObject<HTMLElement>
alignItemWithTrigger	boolean
anchor	(...args) => Element
positionMethod	"absolute" \| "fixed"
sideOffset	number
alignOffset	number
sticky	boolean
arrowPadding	number
disableAnchorTracking	boolean
label	string
keepMounted	boolean

Name	Type
inputRef	React.Ref<HTMLInputElement>
highlightItemOnHover	boolean
defaultOpen	boolean
onOpenChange	(...args) => void
onOpenChangeComplete	((open: boolean) => void)
open	boolean
modal	boolean
items	Array<{label, value}> \| Record<string, ReactNode>
itemToStringLabel	((itemValue: Value) => string)
itemToStringValue	((itemValue: Value) => string)
isItemEqualToValue	((itemValue: Value, value: Value) => boolean)
onValueChange	(...args) => void
nativeButton	boolean
render	React.ReactElement
container	HTMLElement \| RefObject<HTMLElement>
alignItemWithTrigger	boolean
anchor	(...args) => Element
positionMethod	"absolute" \| "fixed"
sideOffset	number
alignOffset	number
sticky	boolean
arrowPadding	number
disableAnchorTracking	boolean
label	string
keepMounted	boolean

Name	Type
inputRef	React.Ref<HTMLInputElement>
highlightItemOnHover	boolean
defaultOpen	boolean
onOpenChange	(...args) => void
onOpenChangeComplete	((open: boolean) => void)
open	boolean
modal	boolean
items	Array<{label, value}> \| Record<string, ReactNode>
itemToStringLabel	((itemValue: Value) => string)
itemToStringValue	((itemValue: Value) => string)
isItemEqualToValue	((itemValue: Value, value: Value) => boolean)
onValueChange	(...args) => void
nativeButton	boolean
render	React.ReactElement
container	HTMLElement \| RefObject<HTMLElement>
alignItemWithTrigger	boolean
anchor	(...args) => Element
positionMethod	"absolute" \| "fixed"
sideOffset	number
alignOffset	number
sticky	boolean
arrowPadding	number
disableAnchorTracking	boolean
label	string
keepMounted	boolean

Name	Type
variant	string(default: raised)
inputRef	React.Ref<HTMLInputElement>
highlightItemOnHover	boolean
defaultOpen	boolean
onOpenChange	(...args) => void
onOpenChangeComplete	((open: boolean) => void)
open	boolean
modal	boolean
items	Array<{label, value}> \| Record<string, ReactNode>
itemToStringLabel	((itemValue: Value) => string)
itemToStringValue	((itemValue: Value) => string)
isItemEqualToValue	((itemValue: Value, value: Value) => boolean)
onValueChange	(...args) => void
nativeButton	boolean
render	React.ReactElement
container	HTMLElement \| RefObject<HTMLElement>
alignItemWithTrigger	boolean
anchor	(...args) => Element
positionMethod	"absolute" \| "fixed"
sideOffset	number
alignOffset	number
sticky	boolean
arrowPadding	number
disableAnchorTracking	boolean
label	string
keepMounted	boolean

Name	Type
inputRef	React.Ref<HTMLInputElement>
highlightItemOnHover	boolean
defaultOpen	boolean
onOpenChange	(...args) => void
onOpenChangeComplete	((open: boolean) => void)
open	boolean
modal	boolean
items	Array<{label, value}> \| Record<string, ReactNode>
itemToStringLabel	((itemValue: Value) => string)
itemToStringValue	((itemValue: Value) => string)
isItemEqualToValue	((itemValue: Value, value: Value) => boolean)
onValueChange	(...args) => void
nativeButton	boolean
render	React.ReactElement
container	HTMLElement \| RefObject<HTMLElement>
alignItemWithTrigger	boolean
anchor	(...args) => Element
positionMethod	"absolute" \| "fixed"
sideOffset	number
alignOffset	number
sticky	boolean
arrowPadding	number
disableAnchorTracking	boolean
label	string
keepMounted	boolean

Scroll Area Separator

Select

Show Code

Installation

Props

Show LessShow More