Field
Combines a label, description and message around an input element.The <Field /> component is a composite wrapper component to help build forms more efficiently. It uses React Context to connect the label, description, and validation message to the input element.
For more realistic implementation examples in a form, see the Forms pattern.
Fields must be accompanied by a label. Effective form labelling helps users understand what information to enter into an input.
Some circumstances might omit the label from view where context is provided through positioning or other elements. You can use the labelVisible prop to achieve this. The label will still be attached to the input for assistive technologies, but visually hidden.
Provides the user with a persistent message to assist in completing a field. This should be used where the information provided is highly pertinent.
Used to mark a field as mandatory to complete before submitting a form.
When building a form it's recommended to provide a legend above the fields which denotes the meaning of the * symbol. NOTE: It is recommended to add aria-hidden on this text element, as screen readers will automatically announce "required" on the required fields.
Messages are used to notify the user about a form field's validation state. Typically this will be an error message, in which case use a clear message to explain what went wrong and how to fix it.
If invalid is true, the message will render in critical color, otherwise it defaults to positive. You can also use the caution prop to display a caution message in a caution color.
By default, extra vertical space is kept under each field to prevent layout shifts when a validation message is displayed. You can turn this extra space off by setting keepSpaceForMessage to false.
When you need to position two fields next to each other (horizontally), you can use the <FieldColumns /> component. This is merely a convenience wrapper around a <Grid />. It supports all the GridProps, but sets some responsive defaults to help implement this common layout:
- gridTemplateColumns = { xsmall: '100%', small: 'repeat(2, 1fr)' }
- columnGap = 'medium'
- alignItems = 'end' (for when the label of a Field wraps to multiple lines)
These components already support the FieldContext and can be used as children of a <Field />: