Select inputs provide a set of options for the user to select. Use a Select field in a Form if you have 7 or more options to display, or if the options are dynamic. If there are fewer than 7 options, a Radio Button Group or Checkbox Group is more appropriate. The Select Input accepts Options as children, and the user may select only one at a time.


If the Select field is required, pass the required prop. This will prevent any Form submission until the required Select option is chosen.


Disable a Select field in order to prevent a user from selecting any information while some task is being completed, or to restrict a user's access.

Read only

If you want to render information that has already been selected for viewing purposes only, use the readOnly prop. The user will not be able to make any new selections if it is read only.

You may add some styling to a Select component given the outcome of certain user actions. The color schemes for the following statuses can be controlled via components['form-field'] in the Theme. In Cosmos, a success status isn't typically presented to the user because it is possible that the field will pass client-side validation but may fail when checking against server-side validation.