When creating a
SelectField, the minimal requirements is to provide a unique
menuItems prop. Each menu item will attempt to be converted into a
SelectField accepts any of the following data types for a menu item:
- a number
- a string
- an object
When the item is a number or a string, both the
label will be that number or
string. This means that the
SelectField's list would show these values as the
and when one of those items are selected, the
SelectField's value would be updated to that
label as well.
If the item is an object, it will extract the
itemProps from the object and
apply all the remaining keys to the
ListItem component. Additional keys can be removed by
By default, the
SelectField will be rendered like a
TextField, but it can also be updated
to be like a "button". This will add some additional padding, add ink, and not allow the
prop. The "button" version will also remove the currently selected item from the list. See
There are times where it is helpful to be able to render additional elements like
in the selection list or disable specific items. If you want to render any additional elements, just add them to
menuItem list and they will be rendered. Any items that do not match the
shape will be ignored as valid selection targets for clicking, touching, or keyboard events.
To disable an item, all that is required is to make sure it is an
object, and add a key
disabled: true to it.
When the item is
disabled, it will not be focusable or selectable.
SelectField can be updated to have a
defaultValue that is initially selected. When this value
is set, it will search all the
menuItems for an item that matches that value by using the
prop or if it exactly matches the string or number when it is not an object item.
Sometimes, you need greater control over the value of the
SelectField, so you can control it by providing
onChange prop to set these yourself. In addition, if you add a menu item that is just the
empty string to your
menuItems list, that can be used to "reset" the value of your
SelectField gains most of the styling abilities as the
TextField so you can display
help text, error text/error states and others.