Currency Input

A component for rendering form inputs for money amounts, showing the currency in the input.

In this guide, you'll learn how to use the Currency Input component.

usd

$

Was this example helpful?

Usage#

Code
import { CurrencyInput } from "@medusajs/ui"
Code
<CurrencyInput symbol="$" code="usd" />

API Reference#

This component is based on the input element and supports all of its props

PropTypeDefault
symbol
string
-
code
string
-
size
"small"
|"base"
"base"
disabled
boolean
false
onInvalid
-
Was this helpful?

Examples#

Controlled Currency Input#

usd

$

Value:
Was this example helpful?

Disabled Currency Input#

eur

Was this example helpful?

Currency Input with Error State#

usd

$

Was this example helpful?

Currency Input Sizes#

Base

usd

$

Was this example helpful?

Small

usd

$

Was this guide helpful?
Ask Anything
Ask any questions about Medusa. Get help with your development.
You can also use the Medusa MCP server in Cursor, VSCode, etc...
FAQ
What is Medusa?
How can I create a module?
How can I create a data model?
How do I create a workflow?
How can I extend a data model in the Product Module?
Recipes
How do I build a marketplace with Medusa?
How do I build digital products with Medusa?
How do I build subscription-based purchases with Medusa?
What other recipes are available in the Medusa documentation?
Chat is cleared on refresh
Line break