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."
    invalid
    errorMessage="This is a validation error."
            >
              <TextInput
                title="email"
                type="email"
                placeholder="name@example.com"
              />
            </FormField>

Visual variants

States

success

EmailOptional

Enter your email.

This is a validation error.

warning

EmailOptional

Enter your email.

This is a validation error.

error

EmailOptional

Enter your email.

This is a validation error.

info

EmailOptional

Enter your email.

This is a validation error.

visual-variants.tsx

// States
         <FormField state="success"
              label="Email"
              helperText="Enter your email."
    invalid
    errorMessage="This is a validation error."
            >
              <TextInput
                title="email"
                type="email"
                placeholder="name@example.com"
              />
            </FormField>
         <FormField state="warning"
              label="Email"
              helperText="Enter your email."
    invalid
    errorMessage="This is a validation error."
            >
              <TextInput
                title="email"
                type="email"
                placeholder="name@example.com"
              />
            </FormField>
         <FormField state="error"
              label="Email"
              helperText="Enter your email."
    invalid
    errorMessage="This is a validation error."
            >
              <TextInput
                title="email"
                type="email"
                placeholder="name@example.com"
              />
            </FormField>
         <FormField state="info"
              label="Email"
              helperText="Enter your email."
    invalid
    errorMessage="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.
`errorClassName`	`string`	No	props	`—`	Additional CSS class names for the error section.
`errorMessage`	`ReactNode`	No	props	`—`	Error message or error state displayed with the component.
`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.
`invalid`	`boolean`	No	props	`—`	-
`label`	`ReactNode`	No	props	`—`	Visible label content for the component.
`labelClassName`	`string`	No	props	`—`	Additional CSS class names for the label section.