FormField

atom

Label wrapper that standardises required flags, helper text, and inline error messages across any form control. Wrap any input with it.

"Wrap an Input with a FormField from lucent-ui. Add a label, required flag, helper text, and an error message for validation."

Usage

React / JSX

import { FormField } from 'lucent-ui'

<FormField label="FormField">FormField</FormField>

pnpm add lucent-ui

FormField props — * required

Prop	Type	Default	Description
`label`*	`string`	—	Label text.
`htmlFor`	`string`	—	Links the label to a form control via id.
`required`	`boolean`	`false`	Appends a red asterisk to the label.
`helperText`	`string`	—	Hint shown below the control.
`errorMessage`	`string`	—	Error shown below the control; overrides helperText.
`children`*	`React.ReactNode`	—	The form control to label.