Field Preview

A field is a combination of a label and any form component, like an input or a select. Optionally, fields can also have info buttons, helper text, and validation states to give people clues about the information they need to enter.

Loading...
Open in CodeSandbox
Field storybook
React guidance

Properties

as

“div”
Default:
none

children

The Field’s child can be a single form control, or a render function that takes the props that should be spread on a form control.

All form controls in this library can be used directly as children (such as <Input> or <RadioGroup> ), as well as intrinsic form controls like <input> or <textarea> . Custom controls can also be used as long as they accept FieldChildProps and spread them on the appropriate element.

For more complex scenarios, a render function can be used to pass the FieldChildProps to the appropriate control.

ReactElement<FieldChildProps, string | JSXElementConstructor<any>> | ((props: FieldChildProps) => ReactNode) | null
Default:
none

hint

Additional hint text below the field.

WithSlotShorthandValue<{ as?: "div"; } & Pick<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof HTMLAttributes<...>> & { ...; } & { ...; }> | null
Default:
none

label

The label associated with the field.

WithSlotShorthandValue<WithSlotRenderFunction<Omit<ComponentProps<LabelSlots, "root">, "required"> & { disabled?: boolean; required?: boolean | WithSlotShorthandValue<{ as?: "span"; } & Pick<...> & { ...; } & { ...; }> | null | undefined; size?: "small" | ... 2 more ... | undefined; weight?: ...
Default:
none

orientation

The orientation of the label relative to the field component. This only affects the label, and not the validationMessage or hint (which always appear below the field component).

“horizontal” “vertical”
Default:
“vertical”

required

Marks the Field as required. If true , an asterisk will be appended to the label, and aria-required will be set on the Field’s child.

boolean
Default:
none

size

The size of the Field’s label.

“small” “medium” “large”
Default:
“medium”

validationMessage

A message about the validation state. By default, this is an error message, but it can be a success, warning, or custom message by setting validationState.

WithSlotShorthandValue<{ as?: "div"; } & Pick<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof HTMLAttributes<...>> & { ...; } & { ...; }> | null
Default:
none

validationMessageIcon

The icon associated with the validationMessage . This will only be displayed if validationMessage is set.

The default depends on validationState :

  • error: <ErrorCircle12Filled />
  • warning: <Warning12Filled />
  • success: <CheckmarkCircle12Filled />
  • none: null
WithSlotShorthandValue<{ as?: "span"; } & Pick<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "key" | keyof HTMLAttributes<...>> & { ...; } & { ...; }> | null
Default:
none

validationState

The validationState affects the display of the validationMessage and validationMessageIcon .

  • error: (default) The validation message has a red error icon and red text, with role=“alert” so it is announced by screen readers. Additionally, the control inside the field has aria-invalid set, which adds a red border to some field components (such as Input).
  • success: The validation message has a green checkmark icon and gray text.
  • warning: The validation message has a yellow exclamation icon and gray text.
  • none: The validation message has no icon and gray text.
“none” “success” “warning” “error”
Default:
""error when validationMessage is set; none otherwise.""