UI Library
Select
Select fields with variants, icons, chips, menu props, and custom selection slots.
Select fields are used for collecting user provided information from a list of options.
Use a regular outside label when the select must align with text fields in form layouts.
Use the density prop to reduce the field height and the maximum height of list items. Available options are default, comfortable, and compact.
Use solo, outlined, underlined, filled, and plain options of variant prop to change the appearance of select.
You can map the text and value fields from object items. In this example the selected item also exposes the full object as the returned value.
Use a custom prepend or append icon.
Use the chips prop to render selected options as chips.
Custom props can be passed directly to the menu using the menuProps prop.
Use the multiple prop to select multiple options.
The selection slot can be used to customize the way selected values are shown in the input.