shadcn.io is not affiliated with official shadcn/ui
Input Group examples · Label
Inline Labels Input Group for React
A username input after an @ label and a price input after a $ label.
Short prefixes that are part of the value's meaning: @ before a username and $ before a price. Each prefix is a Label in a default inline-start addon, so clicking it focuses its input.
Preview
Installation
FAQ
How does the prefix sit before the input?
The addon keeps the default align, inline-start, while the code keeps the input first.
Why is the prefix a Label?
With htmlFor pointing at the input's id, a click on @ or $ focuses the field.
What do screen readers call the fields?
Username and Price, from their aria-labels, which are clearer than @ or $ alone.
How is the price input set up?
type="text" with inputMode="decimal", which shows a numeric keyboard with a decimal point and keeps the value as typed.
Can I use plain text instead of a Label?
Yes: InputGroupText in the addon, as in Currency Input. A click still focuses the input, through the addon.
Related
- Label with Tooltip Input GroupAn email input with its label and a help
- Block Labels Input GroupAn input and a textarea, each with its
- Currency Input Input GroupDollar and euro amount inputs with the
- Currency InputAn amount field with a dollar sign inside
- Email InputAn email field with a mail icon inside it
- Input with LabelA text input with a label above it