Skip to main content

Select

Select is a form control for choosing options from a list, like picking a project status or assigning skills. It opens a menu of options and can include a search input for long lists.

Import

import { Select } from '@vortexlabs/vortex';
import type { SelectProps } from '@vortexlabs/vortex';

Other links

Storybook

Select.Root

Select.Root props
PropTypeDefaultAttributes
children
React.ReactNode
No default value
id
string
No default value
size
union
sm
error
boolean
No default value
disabled
boolean
No default value
variant
union
outline
width
union
No default value
menuMaxHeight
union
20rem
className
union
No default value
attributes
object
No default value

Select.Label

Select.Label props
PropTypeDefaultAttributes
children
React.ReactNode
No default value

Select.Field

Select.Field props
PropTypeDefaultAttributes
children
React.ReactNode
No default value
loadOptions
callback
No default value
value
string
No default value
placeholder
string
No default value
startSlot
React.ReactNode
No default value
loading
boolean
false
loadingLabel
string
No default value
emptyState
React.ReactNode
No default value
open
boolean
No default value
defaultOpen
boolean
No default value
onOpen
callback
No default value
onClose
callback
No default value
onValueChange
callback
No default value

Select.Combobox

Select.Combobox props
PropTypeDefaultAttributes
children
React.ReactNode
No default value
searchQuery
string
No default value
onSearch
callback
No default value
placeholder
string
No default value
loading
boolean
false
loadingLabel
string
No default value
emptyState
React.ReactNode
No default value
open
boolean
No default value
defaultOpen
boolean
No default value
onOpen
callback
No default value
onClose
callback
No default value
loadOptions
callback
No default value
selection
union
multiple
selectedValues
string[]
No default value
onSelectedValuesChange
callback
No default value
onValueRemove
callback
No default value
onClearAll
callback
No default value
selectedValue
union
No default value
onSelectedValueChange
callback
No default value
values
string[]
No default value

Select.ErrorMessage

Select.ErrorMessage props
PropTypeDefaultAttributes
children
React.ReactNode
No default value

Select.HelperText

Select.HelperText props
PropTypeDefaultAttributes
children
React.ReactNode
No default value

Select.Menu

Select.Menu props
PropTypeDefaultAttributes
children
React.ReactNode
No default value
className
union
No default value
attributes
object
No default value

Select.Item

Select.Item props
PropTypeDefaultAttributes
className
union
No default value
attributes
object
No default value
onClick
callback
No default value
disabled
boolean
No default value
href
string
No default value
openInNewTab
boolean
No default value
render
callback
No default value
stopPropagation
boolean
No default value
children
React.ReactNode
No default value
startSlot
React.ReactNode
No default value
endSlot
React.ReactNode
No default value
size
union
sm
startIcon
union
No default value
endIcon
union
No default value
selected
boolean
false
selection
union
single

Select.SectionLabel

Select.SectionLabel props
PropTypeDefaultAttributes
children
React.ReactNode
No default value
className
union
No default value
attributes
object
No default value