Form Field

The FormField component is a controlled input component with a label, helper text, and validation error. It provides a consistent structure for form inputs and helps to manage their state and validation.

Usage & Examples

Default

EmailOptional

Enter your email.

This is a validation error.

default.tsx

         <FormField
            label="Email"
            helperText="Enter your email."
            error="This is a validation error."
          >
            <TextInput
              title="email"
              type="email"
              placeholder="name@example.com"
            />
          </FormField>

Props API

Form Field props API
				Default	Description
`children`	`ReactElement<Record<string, unknown>, string \| JSXElementConstructor<any>>`	Yes	props	`—`	Content rendered inside the component.
`className`	`string`	No	styling	`—`	Additional CSS class names for the component root.
`controlClassName`	`string`	No	props	`—`	Additional CSS class names for the control section.
`data-testid`	`string`	No	testing	`—`	Test id used to identify the component in tests.
`error`	`ReactNode`	No	props	`—`	Error message or error state displayed with the component.
`errorClassName`	`string`	No	props	`—`	Additional CSS class names for the error section.
`helperText`	`ReactNode`	No	props	`—`	Helper text displayed with the field.
`helperTextClassName`	`string`	No	props	`—`	Additional CSS class names for the helper text section.
`id`	`string`	No	props	`—`	HTML id applied to the relevant element.
`label`	`ReactNode`	No	props	`—`	Visible label content for the component.
`labelClassName`	`string`	No	props	`—`	Additional CSS class names for the label section.
`labelPosition`	`LabelPositionType`	No	props	`"top"`	Label Position.