Currency — Fields | @saastro/forms

Currency input with a prefix/suffix adornment

Demo not found for field: currency

 /**
 * Currency Field Demo
 */
import { Form, FormBuilder } from '@saastro/forms';
import { FormProvider } from '@/components/FormProvider';
import { TooltipProvider } from '@/components/ui/tooltip';

const config = FormBuilder.create('currency-demo')
  .layout('manual')
  .columns(12)
  .addField('price', (f) =>
    f
      .type('currency')
      .label('Price')
      .helperText('Enter the amount in USD')
      .placeholder('0.00')
      .prefix('$')
      .suffix('USD')
      .columns({ default: 12 }),
  )
  .addStep('main', ['price'])
  .build();

export default function CurrencyDemo() {
  const handleSubmit = (data: Record<string, unknown>) => {
    console.log('Form submitted:', data);
  };

  return (
    <TooltipProvider>
      <FormProvider>
        <Form config={config} onSubmit={handleSubmit} className="space-y-6" />
      </FormProvider>
    </TooltipProvider>
  );
} 

Overview

currency is an alias of input-group: a standard text input flanked by an optional prefix and/or suffix adornment. It adds no numeric formatting or parsing — it’s a convenience type for monetary amounts with a currency symbol.

Value

The submitted value is the raw string the user typed (valueKind: 'string'), e.g. "49.99". No coercion happens, so validate or transform it yourself if your handler expects a number.

Usage

import { FormBuilder } from '@saastro/forms';

const config = FormBuilder.create('checkout')
  .addField('price', (f) =>
    f.type('currency').label('Price').prefix('$').suffix('USD').placeholder('0.00'),
  )
  .addStep('main', ['price'])
  .build();

Props

Prop	Type	Default	Description
`prefix`	`string`	–	Adornment shown before the input (e.g. `$`)
`suffix`	`string`	–	Adornment shown after the input (e.g. `USD`)
`placeholder`	`string`	`'0.00'`	Input placeholder

Set the adornments with the .prefix() / .suffix() builder methods. For numeric validation, attach a Zod schema with .schema().