shadcn.io is not affiliated with official shadcn/ui
Input examples · Special
Currency Input for React
An amount field with a dollar sign inside it that accepts cents.
Money inputs need a currency and two decimals. This example puts a DollarSignIcon in an InputGroupAddon beside a number input with min 0 and step 0.01, so the field takes amounts like 19.99, and a description under it says the amount is in USD. Use it for prices, payments, donations and budgets.
Preview
Installation
FAQ
What does type number give this field?
A number field. step is 0.01, so the arrows and the browser's validation work in cents, and min is 0, so the browser rejects a negative amount when the form is submitted. The placeholder 0.00 hints at the format.
How is the icon placed inside the field?
The field is an InputGroup: InputGroupInput is the input and InputGroupAddon holds DollarSignIcon. The addon comes after the input in the markup and sits at the inline start, so it is on the left in left-to-right text and on the right in right-to-left text. Clicking it focuses the input.
Is the icon read by screen readers?
No. DollarSignIcon has aria-hidden, because the Amount label already names the field. The icon is a visual hint only.
How is Amount tied to the field?
Clicking the label focuses the field, and screen readers announce it with the field.
FieldLabel sets htmlFor to currency-amount, the input's id.
Related
- Time InputA time field with a clock icon, using the
- Input with LabelA text input with a label above it
- Checkout FormA checkout form with a contact email
- Product Preview Hover CardA product link that opens a card with its
- Search Filter FormA product search form with a query, a
- Error State InputAn invalid email field with an error