Locale-aware amount field. The control value is a number | null. While focused the field shows a raw editable number; on blur it formats with the currency’s fraction digits. Do not nest this inside ply-input-group — it is a composite control.
Playground
<ply-currency-input currency="USD" locale="en-US" placeholder="0.00">Currency Input</ply-currency-input>
Bind with ngModel like any other CVA control.
Value: 1299
Value: 49.99
<ply-label>Price (USD)</ply-label> <ply-currency-input [(ngModel)]="price" currency="USD" [min]="0"></ply-currency-input>
TypeScript
import { Component } from '@angular/core';
// Install: npx ply-ui-cli add currency-input
// Paths are relative to aliases.components (default: src/app/components)
import { CurrencyInputComponent } from './currency-input/currency-input.component';
@Component({
selector: 'app-currency-input-example',
imports: [
CurrencyInputComponent
],
template: `...`
})
export class CurrencyInputExampleComponent {}Install
npx ply-ui-cli add currency-input
Run the following command to add this component to your project:
npx ply-ui-cli add currency-input
For AI agents
Copy a prompt with the registry name, CLI install, and import — or add the Ply MCP server.
npx -y ply-ui-mcp
Ply provides standalone components. Import the exact elements you want to use into your component.
// Install: npx ply-ui-cli add currency-input
// Paths are relative to aliases.components (default: src/app/components)
import { CurrencyInputComponent } from './currency-input/currency-input.component';
@Component({
selector: 'app-your-component',
imports: [
CurrencyInputComponent
],
template: `...`
})
export class YourComponent {} API for currency-input — generated from JSDoc in the library source.
| API | Member | Type | Default | Description |
|---|---|---|---|---|
ply-currency-input | class | string | '' | Extra host classes merged via `cn()`. |
ply-currency-input | currency | unknown | 'USD' | ISO 4217 currency code used for formatting and the prefix symbol. |
ply-currency-input | locale | unknown | 'en-US' | BCP 47 locale passed to `Intl.NumberFormat`. Defaults to `en-US`. |
ply-currency-input | placeholder | unknown | '0.00' | Placeholder shown when the value is empty and the field is not focused. |
ply-currency-input | ariaLabel | unknown | 'Amount' | Accessible name for the inner text field. |
ply-currency-input | min | number | null | null | Minimum allowed value (applied on blur). Omit for no floor. |
ply-currency-input | max | number | null | null | Maximum allowed value (applied on blur). Omit for no ceiling. |
ply-currency-input | showSymbol | boolean | true | Hide the currency symbol prefix (the formatted value still uses the currency). |
Content