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 Svelte, 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 for="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 for="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 for="input-group-inline-username" and for="input-group-inline-price". The rest is on the Label page.
