Select
Select provides a way for users to choose one item from a collapsible list. It helps reduce input errors and screen space.
import { ... } from '@ag.ds-next/react/select';
Usage
Select components can be imported via the select
entrypoint in the @ag.ds-next/react
package.
For example:
import { ... } from '@ag.ds-next/react/select';
Props
Prop | Type | Description |
---|---|---|
label | string | Describes the purpose of the field. |
options | Options | The list of options to display in the drop-down list. |
autoComplete? | string | |
autoFocus? | boolean | |
block? | boolean | If true, the field will stretch to the fill the width of its container. |
disabled? | boolean | |
hideOptionalLabel? | boolean | If true, "(optional)" will never be appended to the label. |
hint? | string | Provides extra information about the field. |
id? | string | |
invalid? | boolean | If true, the invalid state will be rendered. |
maxWidth? | SelectMaxWidthDefault: "md" | The maximum width of the field. |
message? | string | Message to show when the field is invalid. |
name? | string | |
onBlur? | FocusEventHandler<HTMLSelectElement> | |
onChange? | ChangeEventHandler<HTMLSelectElement> | |
onFocus? | FocusEventHandler<HTMLSelectElement> | |
placeholder? | string | |
ref? | Ref<HTMLSelectElement> | |
required? | boolean | If false, "(optional)" will be appended to the label. |
value? | string | number | readonly string[] |
Source
You can view the full source code for this package on Github.