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.

Types

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.

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 ican 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. These size adjustments typically affect the height of the component, while the width adjusts to fit the content. The height of the select component is derived from our spacing system to maintain consistency. We offer multiple sizes to meet different needs.

Auto width

The width of the component can scale automatically to fit the content it contains. This ensures that the select component is appropriately sized based on the options available, providing a better user experience.

Small

The small size select component is designed to fit into more compact spaces within a user interface. It is particularly useful when you need to conserve space or when the select component is part of a form with other small-sized elements. This ensures a consistent and visually appealing layout.

Full width

Full width select are more efficient in mobile designs and rightly so in order to offer users with a wider touch area since the input devices - the fingers, are a lot larger than the cursor on a desktop or larger screen.

Multiple select

Multiple select component allows users to select more than one.