Field

Connects a form input to its label, description and validation message using context.

Prop	Type	Required	Default	Description
`description`	`ReactElement`	—	—	Optionally describe the intent of the input where the label alone would not suffice.
`guidance`	`ReactNode`	—	—	The optional element is visible inline with 'invalidMessage'. For example, it can be used to display remaining characters for the input field (text-input or text-area)
`helpText`	`TooltipProps['content']`	—	—	Help text is hidden by default, and revealed in a tooltip from an icon beside the label. Use help text to clarify anything that may be ambiguous about the input. In most cases a description is preferred.
`id`	`string`	—	—	Used for aria attributes and various element ID suffixes. Defaults to a generated ID.
`invalidMessage`	`string`	—	—	Explain how the user's input doesn't meet the requirements of the field.
`label`	`string`	Yes	—	The label above the input.
`labelVisible`	`boolean`	—	—	When false, the label will only be visible to screen-readers.
`layout`	`horizontal`\|`vertical`	—	—	Decides if label and input should be laid out horizontally or vertically. Default value is vertical.
`requiredOrOptional`	`required`\|`optional`	—	—	Show "(required)" or "(optional)" after the label, in regular weight.
`reserveMessageSpace`	`boolean`	—	—	Reserve the vertical space that will be taken by an invalid message. You would use this to stop subsequent elements from moving when an invalid message is displayed.

Field — Guidelines

Guidance on labeling, describing and messaging a field so it stays clear and supportive rather than overwhelming.

Fieldset

Whenever a caption is needed to provide information about a related set of controls consider the Fieldset component.