Component

Field

Form field with label, description, and error message. Use with Input, Textarea, Select, Checkbox, and Radio for grouped form layouts.

Preview

Field label

Examples

Default

Field label

With error

Field label

This field has an error.

All input types

Input, Textarea, Select, Checkbox, Radio

Text input

Textarea

Select

CheckboxI agree

Radio group

Option 1Option 2

AI Prompt

Ready to copy and paste into any AI model.

7 lines

prompt.txt

Build a Field/FieldGroup component for the **Clinic Admin** design system.

**Design preview to replicate exactly:**
- Default: FieldLabel "Field label", Input placeholder "Placeholder" (w-64)
- With error: same + error text below "This field has an error." (text-destructive text-xs)

Use FieldGroup, FieldLabel, Input. Return React components. Nunito for label (13px weight 600).

Copy once, paste anywhere, keep consistent output.