Command Palette

Search for a command to run...

Multi Select

shadcn/ui

Multi select allows the user to select multiple options from a list.

Multi Select

import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectTrigger, SelectValue } from "@/components/optics/multi-select";<MultiSelect onValuesChange={onValuesChange}>  <MultiSelectTrigger variant="raised">    <MultiSelectValue placeholder="Select status" />  </MultiSelectTrigger>  <MultiSelectContent className="w-full">    <MultiSelectGroup>      <MultiSelectLabel>        Status      </MultiSelectLabel>      <MultiSelectItem        color="bg-teal-400"        value="ready"      >        Ready      </MultiSelectItem>      <MultiSelectItem        color="bg-red-500"        value="error"      >        Error      </MultiSelectItem>      <MultiSelectItem        color="bg-amber-400"        value="building"      >        Building      </MultiSelectItem>      <MultiSelectItem        color="bg-gray-200"        value="queued"      >        Queued      </MultiSelectItem>      <MultiSelectItem        color="bg-gray-200"        value="provisioning"      >        Provisioning      </MultiSelectItem>      <MultiSelectItem        color="bg-gray-200"        value="canceled"      >        Canceled      </MultiSelectItem>    </MultiSelectGroup>  </MultiSelectContent></MultiSelect>

Installation

pnpm dlx shadcn@latest add @optics/multi-select

Props

<Select />
Name
Type
onValuesChange
string(default: undefined)
onOpenChange
string(default: undefined)
inputRef
React.Ref<HTMLInputElement>
highlightItemOnHover
boolean
defaultOpen
boolean
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

<SelectContent />
Name
Type
side
string(default: bottom)
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
<SelectGroup />
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
<SelectItem />
Name
Type
color
string(default: undefined)
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
<SelectLabel />
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
<SelectScrollDownButton />
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
<SelectScrollUpButton />
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
<SelectSeparator />
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
<SelectTrigger />
Name
Type
variant
string(default: undefined)
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
<SelectValue />
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
MenubarNavigation Menu