Docs
Components
Dark
Light
System
Used for choosing an option from a dropdown list.
Defines different visual styles for the Select component.
Different styles for the Select trigger, such as outline and ghost.
outline
ghost
Controls padding and spacing within the dropdown content.
Defines the border-radius of the Select component for rounded or sharp edges.
Disables the SelectItem component to prevent user interaction.
Allows passing custom elements or nodes.
radius
Type:
"none" | "sm" | "md" | "lg" | "xl" | "2xl"
Defines the border-radius of the select component.
Default:
className
string
Allows custom styling by adding additional CSS classes.
mode
"light" | "dark"
Sets the theme mode of the select component.
variant
"outline" | "ghost"
Determines the visual style of the select trigger.
placeholder*
Text displayed when no option is selected.
"padded" | "flush"
Defines the spacing inside the dropdown. 'padded' adds spacing, while 'flush' removes it for a compact look.
openFn
function
Callback function triggered when the select content opens.
Allows additional CSS classes for custom styling.
style
CSSProperties
Allows inline styles to be applied directly to the select content.
value*
The unique identifier for the select item. Required.
onSelect
Callback function triggered when the item is selected.
Additional CSS classes for custom styling.
isCurrent
boolean
Indicates if the item is currently selected.
disabled
Disables the item, preventing selection.
