Select

Import

import { VKSelect } from "@vivakits/react-components";

Basic Select

The Select component enables users to choose one or more options from a list. To configure the options, provide an array of objects with label and value properties. To control the option changing, pass a value prop and an onChange handler.

Select

Variants

The Select component offers two different variants, which can be selected using the variant prop.

Outline

Select

Solid

Select

Sizes

The Select component is available in four different sizes, adjustable via the size prop.

Small

Select

Medium

Select

Large

Select

Extra Large

Select

Rounded

The shape of the Select component can be customized with the rounded prop, allowing you to adjust the corner radius to achieve the desired level of roundness.

None

Select

Extra Small

Select

Small

Select

Default

Select

Medium

Select

Large

Select

Full

Select

Label

The label of the Select component can be modified using the label prop. You can position the label at the start, end, or horizontal positions. Additionally, you can customize the label's styling with the labelClassName prop.

Select Color

Select

Select Color

Select

Select Color

Select

Required

You can designate the Select component as required by using the isRequired prop. This ensures that a selection must be made before the form can be submitted, enforcing mandatory user input.

Select Color*

Select

Show Cancel Button

The Select component includes an optional cancel button, which can be enabled using the showCancel prop. When this button is displayed and clicked, it will clear the current selection, resetting the value state to empty.

Single Select

Select

Multiple Select

Select

Show Divider

The Select component includes an optional divider, which can be displayed by setting the showDivider prop.

Select

Placeholder

The Select component features a placeholder that you can customize through the placeholder prop. By default, the placeholder text is set to 'Select'. This allows you to provide a temporary hint or prompt to users before they make a selection.

Select Color

Error

You can indicate an error state for the Select component by setting the hasError prop. When this prop is enabled, it visually highlights the component to signal to the user that there is an issue. Additionally, you can provide a custom error message through the errorMessage prop to give users more context about the error and how to address it.

Select

Custom error message

Loading State

You can designate the Select component as being in a loading state by utilizing the isLoading prop. When enabled, this visually indicates to users that the component is currently fetching or processing data, providing feedback on the ongoing operation.

Select

Menu Placement and Max Height

The Select component offers flexibility in menu placement, which can be adjusted using the menuPlacement prop. Additionally, you can customize the maximum height of the menu with the menuMaxHeight prop. By default, the menu is positioned at the bottom.

Select

Is Multiple

The Select component supports multiple selections through the isMultiple prop. By default, selected options in the multiselect state are hidden. However, you can reveal them by using the showSelectedOptions prop. This allows users to easily view their selected options within the component.

Selected options hidden

Select

Selected options shown

Select

Is Scrollable

By default, when multiple options can be chosen, the Select component automatically adjusts its height. However, by using the isScrollable prop, you can enforce a fixed height for the Select component, making it scrollable when necessary.

Select

Is Searchable

You can enable search functionality for the Select component by utilizing the isSearchable prop. When activated, this feature allows users to easily search and filter through the available options, enhancing usability, especially in scenarios with extensive lists of options.

Single Select

Multiple Select

No Options Message

The Select component includes a customizable message for scenarios where no options are available. This message can be tailored using the noOptionsMessage prop, allowing you to provide helpful guidance or instructions to users when the list of options is empty.

Select

Customize Icon

You have the option to display a checked icon next to selected options by using the optionsWithCheck prop. This icon can be customized using the checkedIcon prop. Since selected options are hidden by default in the multiselect state, you need to use the showSelectedOptions prop to reveal the checked icon. Additionally, you can customize the cross icon for selected values using the removeValueIcon prop.

Select

Create Options

isCreatable determines whether the select component permits us to create new options. When a new option is created by us, the createOptionByAPI callback function is triggered. This function takes the newly created option as a parameter and can be utilized for additional actions, such as sending the new option to an API or logging it.

Single Select

Multiple Select

Disabled Option

isDisabled determines whether the select component is interactable.

Select

Dropdown Indicator

dropdownIndicator lets us customize the dropdown indicator icon.

Select

🔽

Customization

We can customize the options using the node property in the options array. And if we want to show the node in the selected value, we can use the showValueNode prop.

Select

Customization with Utility Classes

We can customize our select component by passing an object of utility classes.

Select

API Reference

Property	Description	Type	Default
options	Array of options to be displayed in the dropdown	Option[]	[]
value	Selected value	Option \| Option[]
onChange	Callback function to be called when the value changes	(option: Option \| Option[]) => void
vairant	solidoutline	Changes select appreance	solid
size	smmdlgxl	Changes select size	md
rounded	defaultnonexssmmdlgfulll	Changes the border radius of select	primary
label	Label for the select component	string
labelPosition	startendhorizontal	Changes the position of the label	start
labelClassName	Custom utility classes for label	string
isRequired	Designates the select component as required	boolean	false
showCancel	Displays a cancel button to clear the selection	boolean	false
showDivider	Displays a divider in the dropdown	boolean	false
placeholder	Placeholder text	string	Select
hasError	Indicates an error state	boolean	false
errorMessage	Error message to display	string
isLoading	Indicates a loading state	boolean	false
menuPlacement	Placement of the dropdown menu	'top' \| 'bottom'	'bottom'
menuMaxHeight	Maximum height of the dropdown menu	string
isMultiple	Designates the select component as multiselect	boolean	false
isScrollable	Designates the select component as scrollable	boolean	false
isSearchable	Designates the select component as searchable	boolean	false
noOptionsMessage	Message to display when no options are available	string
optionsWithCheck	Displays a checked icon next to selected options	boolean	false
checkedIcon	Custom icon for selected options	ReactNode
removeValueIcon	Custom icon for removing selected values	ReactNode
showSelectedOptions	Reveals selected options in the multiselect state	boolean	false
IsCreatable	Designates the select component as creatable	boolean	false
IsDisabled	Disables the select component	boolean	false
DropdownIndicator	Custom icon for dropdown	ReactNode
createOptionByAPI	Callback function to be called when a new option is created	(newOption: Option) => void
styles	Custom utility classes for styling	Styles

Rate Skeleton