Forms

FormField

A wrapper component for custom or native form inputs that provides consistent labeling, hints, and error states. Use when wrapping raw HTML inputs or third-party components.

Basic Usage

Wrap native HTML inputs with FormField for consistent styling and accessibility.

Patient Full Name

Date of Birth

Insurance Provider

With Hints

Show hints as tooltips to provide additional context without cluttering the form.

Member ID

NPI Number

With Descriptions

Provide longer explanatory text below the field.

Email Address

We'll use this for appointment reminders and lab results

Additional Notes

Include any relevant medical history or concerns

With Errors

Display validation errors to guide users in correcting their input.

Email Address

Please enter a valid email address

Member ID

Member ID not found. Please verify and try again.

Size Variants

Adjust the label size to match form density requirements.

Small Label

Medium Label (Default)

Large Label

Disabled State

Apply disabled styling to indicate non-interactive fields.

Medical Record Number

Created Date

Automatically assigned by system

Props

Prop	Type	Default	Description
`label` *	`string`	—	Field label text
`required`	`boolean`	false	Shows required indicator
`error`	`string`	—	Error message to display
`hint`	`string`	—	Helper text shown as tooltip
`description`	`string`	—	Description text below the field
`id`	`string`	—	ID for label association
`size`	`'sm' \| 'md' \| 'lg'`	'md'	Label text size
`hideLabel`	`boolean`	false	Visually hides label (still accessible)
`disabled`	`boolean`	false	Applies disabled styling

When to Use FormField

• Use for wrapping native HTML inputs (<input>, <select>, <textarea>)
• Use for third-party components that don't have built-in labels
• For library components like TextInput, Select, etc., use their built-in label prop instead
• Ensure the id prop matches the input's id for proper label association

Healthcare Best Practices

• Always mark PHI (Protected Health Information) fields appropriately
• Use clear, descriptive labels that match medical terminology when appropriate
• Provide hints for fields with specific format requirements (dates, IDs, phone numbers)
• Display inline validation errors immediately after the user leaves a field
• Use required indicators consistently throughout all forms
• Ensure all fields have proper id for accessibility