# Selects

The Select component is used for collecting user provided information from a list of options.

# Usage

Standard

Filled style

Outlined style

Solo style

# API

MSelect

# 注意

The default setting of browser auto completion is off, which may be changed or ignored by different browsers. MDN

The Auto attribute of menupprops only supports the default input style.

When using an object as the attribute of items, you must use itemtext and itemvalue to associate with the incoming object. These values are text and value by default and can be changed.

# Examples

# Props

# Custom text and value

You can specify the specific properties within your items array correspond to the text and value fields. By default, this is text and value. In this example we also use the return-object prop which will return the entire object of the selected item on selection.

Custom items

Florida

Florida, FL

# Dense

You can use Dense prop to reduce the field height and lower max height of list items.

# Basic

Applying the Disabled prop to a MSelect will prevent a user from interacting with the component.

# Icon

Use a custom prepended or appended icon.

# Light

A standard single select has a multitude of configuration options.

# MenuProps

Custom props can be passed directly to MMenu using MenuProps prop. In this example menu is force directed to top and shifted to top.

# Multiple

A multi-select can utilize MChip as the display for selected items.

# Readonly

You can use the Readonly prop on MSelect which will prevent a user from changing its value.

# Contents

# Append and prepend item

The MSelect components can be optionally expanded with prepended and appended items. This is perfect for customized select-all functionality.

# Selection

The SelectionContent can be used to customize the way selected values are shown in the input. This is great when you want something like foo (+2 others) or don’t want the selection to occupy multiple lines.