Input Group
One field frame around an input and its addons.
Overview
Input group is the Morpha text field — a 56px frame whose outline ring carries
every state — wrapped around a control plus addons: a leading icon, a text
prefix/suffix, or a trailing action button. Hover brightens the outline,
focus-within draws the primary ring, and state="error" / state="disabled"
recolor or dim the whole frame.
Supporting text
$ npx morpha-ui add input-groupExamples
Buttons and prefixes
Textarea
0 / 280
States
Drive the frame with the state prop. error recolors the ring, thickens it
once the control holds a value, and auto-appends a trailing alert; disabled
dims the whole field to 38%.
Supporting text
*obbligatorio
Usa almeno 6 caratteri
Managed by your admin.
Icons
Leading/trailing icons are optional: a significant leading icon (date picker), a trailing voice-input mic, a dropdown affordance, or a clear button.
Read-only
Read only supporting text
Installation
Morpha UI components are distributed via the Morpha CLI: npx morpha-ui add input-group. In the meantime, since this is the base shadcn component, you
can also add it directly:
npx shadcn@latest add input-groupAPI Reference
Prop
Type
Accessibility
- Use
InputGroupInput/InputGroupTextareainside the frame (never a bareInput); the frame is focusable and forwards focus to the control. - Clicking passive addon space focuses the control;
InputGroupButtonkeeps its own behavior and needs anaria-labelwhen icon-only. - Signal validation with
state="error"on theInputGroup(it recolors the ring); pair it with an accessible message.