Forms

Textarea

A multi-line text input component for longer content like clinical notes, patient histories, and referral notes. Supports auto-resize, character counting, and comprehensive validation.

Basic Usage

Standard textareas for capturing detailed clinical information and patient notes.

Clinical Notes

Patient History

With Character Count

Use character counting for fields with length limits to help users stay within documentation requirements.

Referral Notes

0/2000

Brief Assessment Summary

0/500

Auto-Resize

Auto-resizing textareas grow with content, perfect for dynamic note-taking during patient encounters.

Progress Notes

Treatment Plan

Validation States

Show validation feedback to ensure complete and accurate clinical documentation. Use validateOnMount to show validation state immediately.

Assessment & Plan

Completed Documentation (success state)

Documentation complete

Incomplete Notes (error state)

Documentation must be at least 100 characters for compliance

Sizes

Choose appropriate sizes based on form density and the importance of the documentation field.

Small Textarea

Medium Textarea

Large Textarea

Disabled & Read-only

Use disabled for unavailable fields and read-only for archived or locked documentation.

Archived Clinical Notes

Patient seen for routine follow-up. Blood pressure well-controlled on current medication. No new concerns. Continue current treatment plan. Follow-up in 3 months.

Pending Documentation

Template Notes

Resize Options

Control how users can resize textareas based on your UI requirements.

Fixed Size (No Resize)

Vertical Resize Only

Both Directions

Props

Prop	Type	Default	Description
`label` *	`string`	—	Textarea label text
`value`	`string`	''	Current textarea value
`placeholder`	`string`	''	Placeholder text
`rows`	`number`	4	Number of visible rows
`error`	`string`	—	Error message to display
`hint`	`string`	—	Helper text shown on focus
`successMessage`	`string`	—	Success message when valid
`required`	`boolean`	false	Marks field as required
`disabled`	`boolean`	false	Disables the textarea
`readonly`	`boolean`	false	Makes textarea read-only
`maxLength`	`number`	—	Maximum character length
`minLength`	`number`	—	Minimum character length
`showCharCount`	`boolean`	false	Shows character counter
`resize`	`'none' \| 'vertical' \| 'horizontal' \| 'both' \| 'auto'`	'vertical'	Resize behavior
`size`	`'sm' \| 'md' \| 'lg'`	'md'	Textarea size
`hideLabel`	`boolean`	false	Hides label visually (keeps for accessibility)
`id`	`string`	—	Unique identifier
`name`	`string`	—	Form field name
`class`	`string`	—	Additional CSS classes
`oninput`	`(event: Event) => void`	—	Input handler
`onblur`	`(event: FocusEvent) => void`	—	Blur handler
`onfocus`	`(event: FocusEvent) => void`	—	Focus handler
`validateOnMount`	`boolean`	false	Show validation state immediately without waiting for interaction

Healthcare Best Practices

• Always use showCharCount for fields with length limits to help clinicians stay within documentation requirements
• Use resize="auto" for note-taking during patient encounters to reduce scrolling
• Mark required fields with required and provide clear hint text for documentation standards
• Use readonly for finalized notes to prevent accidental edits to archived documentation
• Validate clinical notes for completeness before submission to ensure compliance with documentation standards
• Provide meaningful error messages that guide clinicians on what information is missing or incorrect
• Consider using minLength to enforce minimum documentation requirements