Select

The Select component allows the user to click and select an item from a list of options.

View source code
  • onSelect
    (value: T) => void

    Handler that is called when a option is selected.

  • options
    (T | OptionGroup<T>)[]

    The list of options.

  • value
    Option

    The current value (controlled).

  • className
    string

    className for the element.

  • dropdownContentMaxHeight
    string

    Maximum height of the dropdown content.

  • fit
    "content" | "parent"

    Whether the Select should fit its parent or content.

    Default: content
  • isDisabled
    boolean

    Whether the Select is disabled.

  • isInvalid
    boolean

    Whether the Select is invalid.

  • name
    string

    The name of the Select, used when submitting an HTML form.

  • onBlur
    FocusEventHandler<HTMLInputElement>

    Handler that is called when the element loses focus.

  • onFocus
    FocusEventHandler<HTMLInputElement>

    Handler that is called when the element receives focus.

  • placeholder
    string

    Temporary text that occupies the Select when it is empty.

  • placement
    "bottom-end" | "bottom-start" | "end-bottom" | "end-top" | "top-end" | "top-start"

    Placement the menu will render relative to the field

  • renderOption
    (option: T, state?: { isSelected: boolean; isDisabled: boolean; }) => ReactNode

    Function to render option. Should return DropdownItem(s).

  • renderOptionGroup
    (optionGroup: OptionGroup<T>) => ReactNode

    Function to render option group.