Component

Input

Text input fields for forms, search, and data entry. Default, focus, error, and disabled states.

Preview

Examples

Default

With label

Label + Input via htmlFor. Use Field for FieldGroup layouts.

Disabled

Error state

AI Prompt

Ready to copy and paste into any AI model.

prompt.txt
Build a shadcn/ui Input component for the **Clinic Admin** design system.

**Base styling:**
- Background: white (light), border 1px solid #C4D0DB, border-radius 10px, padding 9px 14px
- Font: Nunito Sans, 14px, weight 400, text #353D4A, placeholder #657486

**States:**
- Focus: border-color #70C4CA, ring 2px primary/20
- Error: border destructive, aria-invalid
- Disabled: opacity 0.5, cursor not-allowed

**Design preview to replicate exactly:**
- Default: single input w-64 placeholder "Enter value..."
- With label: `<Label htmlFor="…">` "Full name" + `<Input id="…">` placeholder "e.g. Maria Santos" (not FieldGroup — that belongs on the Field page)
- Disabled: placeholder "Disabled", disabled
- Error: FieldGroup with FieldLabel "Email", Input placeholder "email@example.com", aria-invalid, optional error text below
- Fallback: two inputs "Default" and "With value" (defaultValue "Filled")

Return a complete React component with TypeScript. Use shadcn/ui Input as base, cn() for merging, Tailwind CSS. Pair with Label or Field/FieldGroup as shown.
Copy once, paste anywhere, keep consistent output.