Select
The Select component is a versatile and customizable element commonly used in forms and user interfaces. It is designed to present a list of options for users to choose from, either as a single selection or multiple selections. This component plays a vital role in collecting user-provided information efficiently and intuitively.
To accommodate various design styles and use cases, the select component offers numerous customizable properties. Developers can customize how the component display the labels or selected option to improve user experience.
Types
Outlined
The default style is "outlined," featuring a thin line around the selection area. The label appears above the selection, and the dropdown menu is displayed below it.Filled
Filled select feature a background color fill. Depending on the theme or intended action, the color fill can range from a primary brand color to any other applicable color in a brand's color palette.Standard
The standard style features a simple underline below the selection area.Sizes
The select component can be adjusted in size to accommodate various use cases.
Auto width
The width of the component can scale automatically to fit the content it contains.Small
The small size select component is designed to fit into more compact spaces.Full width
Full width select are more efficient in mobile designs.Multiple select
Multiple select component allows users to select more than one option.
