Select

A select component with custom dropdown.

Source

Installation

npx @rahimstack@latest add select

API Reference

SelectOption

PropTypeDefault
value *
string
label
string
disabled
boolean

Select

PropTypeDefault
Omit<React.ComponentPropsWithoutRef<"button">, "value" | "defaultValue">
options *
SelectOption[] | undefined
placeholder
string
dir
"ltr" | "rtl"
value
string | undefined
onValueChange
(value: string) => void
onOpenChange
(open: boolean) => void
defaultValue
string
inputRef
React.Ref<HTMLSelectElement>
id
string | undefined
name
string
label
React.ReactNode
labelProps
React.LabelHTMLAttributes<HTMLLabelElement>
help
React.ReactNode
error
string
required
boolean
disabled
boolean
readonly
boolean
intent
"basic" | "filled" | "unstyled"
leftAddon
React.ReactNode
leftIcon
React.ReactNode
rightAddon
React.ReactNode
rightIcon
React.ReactNode
classNamestring
chevronIconClassstring
scrollButtonClassstring
contentClassstring
viewportClassstring
itemClassstring
itemTextClassstring
checkIconClassstring
fieldLabelstring
fieldAsteriskstring
fieldDetailsstring
fieldstring
fieldHelpTextstring
fieldErrorTextstring
iconClassstring
addonClassstring

const SelectAnatomy = defineStyleAnatomy({
    root: cva([
        "UI-Select__root",
        "inline-flex items-center justify-between relative whitespace-nowrap truncate",
    ]),
    chevronIcon: cva([
        "UI-Combobox__chevronIcon",
        "ml-2 h-4 w-4 shrink-0 opacity-50",
    ]),
    scrollButton: cva([
        "UI-Select__scrollButton",
        "flex items-center justify-center h-[25px] bg-[--paper] text-base cursor-default",
    ]),
    content: cva([
        "UI-Select__content",
        "w-full overflow-hidden rounded-[--radius] shadow-md bg-[--paper] border leading-none z-50",
    ]),
    viewport: cva([
        "UI-Select__viewport",
        "p-1 z-10",
    ]),
    item: cva([
        "UI-Select__item",
        "text-base leading-none rounded-[--radius] flex items-center h-8 pr-2 pl-8 relative",
        "select-none disabled:opacity-50 disabled:pointer-events-none",
        "data-highlighted:outline-none data-highlighted:bg-[--subtle]",
        "data-[disabled=true]:opacity-50 data-[disabled=true]:pointer-events-none",
    ]),
    itemText: cva([
        "UI-Select__itemText",
        "flex-none whitespace-nowrap truncate",
    ]),
    checkIcon: cva([
        "UI-Select__checkIcon",
        "absolute left-2 w-4 inline-flex items-center justify-center",
    ]),
})