Select Input
Allows a user to choose from a pre-defined list.
Examples
Default Select Input
<SelectInput
required
label="Label"
placeholder="Placeholder"
id="default-input"
size="small|medium(default)"
/>
With Helper Text
<SelectInput
...
helperText="Helper Text"
/>
With Critical, Warning, Success, and Disabled States
<SelectInput
...
state="critical|warning|success"
/>
With Icon
<SelectInput ...>
<FormControlDecoration position="start|end">
<Icon name="search" />
</FormControlDecoration>
</SelectInput>
Loading
<SelectInput
...
loading
/>
Controlled Select Input
<SelectInput
...
value={someValue}
onChange={(evt, value) => ...}
/>
Props
| Name | Type | Default Value | Required | Description |
|---|---|---|---|---|
fieldClassName | string | No | A className to apply to the field. | |
fieldProps | Record<string, unknown> | No | Any props to spread onto the field container. | |
helperText | ReactNode | No | A string or component to display as helper text beneath the input | |
icon | string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | ReactFragment | ReactPortal | null | No | An icon to render at the front of the input. | |
label | ReactNode | No | A string or component to display as a label above the input | |
loading | boolean | false | No | Should the input display a loading state? Useful when options are being loaded via a remote request. |
onChange | FormControlChangeEventHandler<InputType, string | number | readonly string[] | (string | number | readonly string[])[]> | undefined | No | Emit a new value when the input's selected value changes. | |
required | boolean | false | No | Is the field required? |
size | "small" | FormControlSize | "medium" | FormControlSize.Medium | No | The size of the field |
state | "" | FormControlState | "critical" | "warning" | "success" | FormControlState.Default | No | The state of the field |