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';

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[]

You can view the full source code for this package on Github.