Default
Up to £5,000 a transfer.
Show the codeHide the code
Default, code
<CurrencyField
label="Amount"
defaultValue={120}
hint="Up to £5,000 a transfer."
maxValue={5000}
/>CurrencyField
An amount of money, formatted with its currency in the locale and parsed the same way.
- Pro
- Version 2.0.0-rc.1
- APG pattern: Spinbutton (currency)
Examples
Still previews of the real component, rendered from its stories. Pro code isn’t public, so nothing in them responds. Switch the theme and density for every preview at once.
Euros
Show the codeHide the code
Euros, code
<CurrencyField label="Budget" currency="EUR" defaultValue={2500} showMinorUnits={false} />Invalid
Error: Enter an amount up to £5,000
Show the codeHide the code
Invalid, code
<CurrencyField
label="Amount"
isInvalid
errorMessage="Enter an amount up to £5,000"
defaultValue={6200}
/>Install
Pro components come as source from the SuperDuper registry, with a licence key from Solo, Team or Studio. The registry and checkout aren’t open yet.
Add it from the registry (Pro licence key)
npx shadcn@latest add @superduperui/currency-fieldThen import it
import { CurrencyField } from "@/components/ui/currency-field"Props
| Prop | Type | What it does |
|---|---|---|
currency | stringDefault 'GBP' | ISO 4217 currency code. Default GBP. |
showMinorUnits | booleanDefault true | Show pence (2 decimal places). Default true. |
showSteppers | unknownDefault false | |
minValue | unknownDefault 0 |
When to use it
Use it for
- Prices, budgets, transfer amounts
- Any money input
Use something else for
- Card numbers or account numbers: use TextField
- Ranges of prices: use Slider with currency formatOptions
Accessibility
Screen readers announce "Amount, £120.00, stepper".
WCAG 2.2 AAA criteria the component meets in Comfortable density: 1.4.6, 1.4.9, 2.1.3, 2.3.2, 2.4.13, 2.5.5, 2.5.6.
Compact density meets AA (2.5.8, 24px targets), not AAA.
What your product still has to do
- State limits in the hint
Shared patterns it ships with: 3.3.6 (out-of-range amounts are explained, not cleared).
This release’s test results
| axe-core (WCAG A, AA, AAA and best practice) | 80 runs across every story, theme, density and width: 0 violations |
|---|---|
| Rendered text contrast | 75 text runs: 0 below 7:1, lowest 8.43:1 |
| Target size | 16 targets: 0 under 44px in Comfortable |
| Focus appearance (2.4.13) | 18 focus stops in 3 browser engines: all pass |
| Keyboard script | Chromium 3 of 3, Firefox 3 of 3, WebKit 3 of 3 |
Manual passes with VoiceOver and NVDA haven’t been done yet.
Keyboard
Each step is scripted and run in Chromium, Firefox and WebKit.
| Key | What happens |
|---|---|
| Tab | Tab reaches the amount |
| ArrowUp | Up adds one pound |
| End | End goes to the maximum |
In Figma
The Figma component is CurrencyField, with State (Default, Hover, Focus, Disabled, Invalid); Currency (GBP, EUR, USD). The Figma library isn’t published yet.
Figma to code: State (Default, Hover, Focus, Disabled = isDisabled, Invalid = isInvalid); Currency → currency (GBP = "GBP", EUR = "EUR", USD = "USD"); Value → defaultValue (number; formatted); nested Label → label; nested Hint → hint; nested FieldError → errorMessage.