Agriculture Design System
Beta
Design System for the Export Service

Select

Select provides a way for users to choose one item from a collapsible list. It helps reduce input errors and screen space.

View in FigmaView in StorybookView in Github
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

Select Props
PropTypeDescription
labelstring
Describes the purpose of the field.
optionsOptions
The list of options to display in the drop-down list.
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.