Select
In progress
Aria
RTL
A form input used for selecting a value: when collapsed it shows the currently selected option and when expanded, it shows a scrollable list of predefined options for the user to choose from. Options are not styled here. For list with styled options please use Dropdown component.
![Select](/moon/assets/images/facing/components/select.png)
Default
Sizes
With label
Disabled and error
With hint
Form.Select props
Name | Type | Required | Default | Description |
---|---|---|---|---|
id | string | No | - | Id to be given to the select tag |
field | atom | No | - | Name of the field, usually should be taken from context |
form | form | No | - | Form info, usually should be taken from context |
options | list | No | [] | Options for select. Or list of keyword, either list of maps. Format: [%{key: shown_label, value: option_value, disabled: bool}], diisabled is optional |
value | any | No | - | Selected option(s) value - do not use it inside the form, just for away-from-form components |
disabled | boolean | No | - | Well, disabled |
size | sm | md | lg | No | "md" | Common moon size property |
class | css_class | No | - | Additional classes for the <select> tag |
field_class | css_class | No | - | Additional classes for the <select> tag in case of floating label or Group |
prompt | string | No | - | Some prompt to be shown on empty value |
testid | string | No | - | Data-testid attribute value |
error | boolean | No | - | Some additional styling will be set to indicate the field is invalid. Generally should be set by Form.Field component |