Field

The field package exposes the elements around form inputs, and an API to compose them.

import { ... } from '@ag.ds-next/react/field';

Usage

Field components can be imported via the field entrypoint in the @ag.ds-next/react package.

For example:

import { ... } from '@ag.ds-next/react/field';

Field Props
Prop	Type	Description
children	ReactNode \| ((a11yProps: A11yProps) => ReactNode)
hint	string \| undefined	Provides extra information about the field.
label	string	Describes the purpose of the field.
message	string \| undefined	Message to show when the field is invalid.
required	boolean	If false, "(optional)" will be appended to the label.
hideOptionalLabel?	boolean	If true, "(optional)" will never be appended to the label even when `required` is `false`.
id?	string	Defines an identifier (ID) of the field, which must be unique.
invalid?	boolean	If true, the invalid state will be rendered.
labelId?	string	Defines an identifier (ID) of the label element, which must be unique.
maxWidth?	"md" \| "lg" \| "xl" \| "xs" \| "sm"	The maximum width of the field.
secondaryLabel?	string	Text to prepend to the default secondary label.

FieldContainer Props
Prop	Type	Description
children?	ReactNode
id?	string	Defines an identifier (ID) which must be unique.
invalid?	boolean	If true, the invalid state will be rendered.

FieldHint Props
Prop	Type	Description
id	string	Defines an identifier (ID) which must be unique.
children?	ReactNode

FieldLabel Props
Prop	Type	Description
required	boolean	If false, "(optional)" will be appended to the label.
as?	ElementType<any>Default: "label"
children?	ReactNode
hideOptionalLabel?	boolean	If true, "(optional)" will never be appended to the label even when `required` is `false`.
htmlFor?	string	The ID of the form element this label relates to.
id?	string	Defines an identifier (ID) which must be unique.
secondaryLabel?	string	Text to prepend to the default secondary label.

FieldMessage Props
Prop	Type	Description
id	string	Defines an identifier (ID) which must be unique.
children?	ReactNode

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