The Field component is a versatile UI element used to create input areas in forms. It typically includes a label and optional helper text or validation messages. This component ensures consistency and accessibility in form design, providing a structured and user-friendly way to capture user input.
We recommend using React-hook-form or Formik with these components. If so, use Field for your fields (as in the examples below). The examples below give you an overview of common props (e.g. size, disable, required etc.)
You can find props for each field component in the other Forms pages.
Use label to add a Label to your field.
You can also use hideLabel to hide it visually but keep it accessible for screen readers, or inline to display it next to the input.
Use hint to add an hint to your field (it can be overload by a variant - see below)
Use maxLength to display a character count below your field. It takes an object with count and max properties. This property also passes maxLength to the input component to limit the number of characters that can be entered.
Use warning, error, or success properties to add a variant status on your fields. The label, hint or border color are set by magic 🪄
Add disabled on Field component
Add required on Field component