FormField

A standardized wrapper for form inputs that provides consistent label styling, helper text, error state handling, and automatic accessibility via label-input association. Wrap any input component to get unified form field behavior.

Import

import { FormField } from '@wavebooking/aqua-fusion';

Preview

Live PreviewOpen in Storybook

Loading preview...

Usage

<FormField label="Email" error={errors.email?.message} required>
  <Input type="email" {...register('email')} />
</FormField>

<FormField label="Bio" helperText="Write a short description about yourself.">
  <Textarea {...register('bio')} />
</FormField>

Props

Prop	Type	Default	Description
`children`*	ReactNode	-	The form input element to wrap.
`label`	string	-	Label text displayed above the input.
`helperText`	string	-	Helper text shown below the input. Replaced by error when present.
`error`	string	-	Error message displayed below the input in red. Replaces helperText.
`required`	boolean	-	Whether the field is required. Shows a red asterisk next to the label.
`disabled`	boolean	-	Whether the field is disabled. Reduces wrapper opacity.
`className`	string	-	Additional CSS classes for the wrapper div.
`id`	string	-	Custom ID for the field. Auto-generated if not provided.