shadcn.io is an independent project built on shadcn/ui
Two short prefixes inside the field. @ sits before a username, and $ sits before a price. Each prefix is a label, so clicking it focuses the input. The price field uses a decimal keyboard and the placeholder 0.00.
Use a prefix when it is part of how the value is read, not a separate caption. A caption above the field is a Label on its own. In Vue, Ark UI does not include the prefix in the submitted value.
Installation
Anatomy
Usage
<div class="flex w-full max-w-sm flex-col gap-4">
<InputGroup class="bg-background">
<InputGroupInput
aria-label="Username"
id="input-group-inline-username"
placeholder="shadcn"
type="text"
/>
<InputGroupAddon>
<Label htmlFor="input-group-inline-username">@</Label>
</InputGroupAddon>
</InputGroup>
<InputGroup class="bg-background">
<InputGroupInput
aria-label="Price"
id="input-group-inline-price"
inputMode="decimal"
placeholder="0.00"
type="text"
/>
<InputGroupAddon>
<Label htmlFor="input-group-inline-price">$</Label>
</InputGroupAddon>
</InputGroup>
</div>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.
API Reference
Input Group
Sets aria-label="Username", id="input-group-inline-username", placeholder="shadcn", type="text", aria-label="Price" and id="input-group-inline-price". The rest is on the Input Group page.
Label
Sets htmlFor="input-group-inline-username" and htmlFor="input-group-inline-price". The rest is on the Label page.
