Inputs

MoneyInput

BRL currency field. The bound value is integer cents and the display is formatted as you type.

<script>
  import { MoneyInput } from "@codeatlasdev/ui/forms";
  let price = $state(123456); // R$ 1.234,56
</script>

<MoneyInput label="Price" bind:value={price} />

Import from the @codeatlasdev/ui/forms subpath. The value is always an integer number of cents, so there is no floating-point rounding. Digits shift in from the right: typing 123456 gives R$ 1.234,56. min and max clamp the value, and an out-of-range value set from outside is clamped back into value.

Default

Type 123456 to get R$ 1.234,56.

Price

value = 123456 cents → R$ 1.234,56

Code

<script lang="ts">
  import { MoneyInput, centsToDisplay } from '@codeatlasdev/ui/forms';

  let price = $state(123456);
</script>

<div class="col">
  <MoneyInput label="Price" bind:value={price} />
  <p class="out">value = {price} cents → {centsToDisplay(price)}</p>
</div>

<style>
  .col {
    display: flex;
    flex-direction: column;
    gap: var(--ca-space-3);
    width: 100%;
    max-width: 400px;
  }

  .out {
    margin: 0;
    font-family: var(--ca-font-mono);
    font-size: var(--ca-font-size-caption);
    color: var(--ca-text-secondary);
  }
</style>

Min, max, negative, error and disabled

Deposit is clamped between R$ 10,00 and R$ 100,00. Include a minus sign to toggle the sign when allowNegative is set.

Deposit

Between R$ 10,00 and R$ 100,00.

Adjustment

Amount

Amount must be greater than zero.

Locked

Code

<script lang="ts">
  import { MoneyInput } from '@codeatlasdev/ui/forms';

  let deposit = $state(5000);
  let adjustment = $state(-2500);
</script>

<div class="col">
  <MoneyInput
    label="Deposit"
    bind:value={deposit}
    min={1000}
    max={10000}
    description="Between R$ 10,00 and R$ 100,00."
  />
  <MoneyInput label="Adjustment" bind:value={adjustment} allowNegative />
  <MoneyInput label="Amount" value={0} error="Amount must be greater than zero." />
  <MoneyInput label="Locked" value={99900} disabled />
</div>

<style>
  .col {
    display: flex;
    flex-direction: column;
    gap: var(--ca-space-4);
    width: 100%;
    max-width: 400px;
  }
</style>

Helpers

Pure functions exported from @codeatlasdev/ui/forms.

centsToDisplay(123456) = R$ 1.234,56

parseInputToCents("R$ 1.234,56") = 123456

Code

<script lang="ts">
  import { centsToDisplay, parseInputToCents } from '@codeatlasdev/ui/forms';
</script>

<div class="col">
  <p class="out">centsToDisplay(123456) = {centsToDisplay(123456)}</p>
  <p class="out">parseInputToCents("R$ 1.234,56") = {parseInputToCents('R$ 1.234,56')}</p>
</div>

<style>
  .col {
    display: flex;
    flex-direction: column;
    gap: var(--ca-space-2);
  }

  .out {
    margin: 0;
    font-family: var(--ca-font-mono);
    font-size: var(--ca-font-size-caption);
    color: var(--ca-text-secondary);
  }
</style>

Props

Prop	Type	Default	Description
`value`	`number`	`0`	Bindable amount in integer cents.
`min`	`number`	–	Minimum value in cents.
`max`	`number`	–	Maximum value in cents.
`allowNegative`	`boolean`	`false`	Accepts negative amounts. Type a minus sign to toggle.
`label`	`string`	–	Label text.
`placeholder`	`string`	`centsToDisplay(0)`	Input placeholder.
`error`	`string`	–	Error message. Puts the field in the error state.
`description`	`string`	–	Hint shown below the field.
`disabled`	`boolean`	`false`	Disables the input.
`required`	`boolean`	`false`	Marks the field as required.
`readonly`	`boolean`	`false`	Makes the input read-only.
`size`	`'sm' \| 'md'`	`'md'`	Field height.
`name`	`string`	–	Native name, for form submission.
`leading / trailing`	`Snippet`	–	Content before or after the input.
`class`	`string`	–	Extra classes on the root.
`onchange`	`(cents: number) => void`	–	Called on every edit with the new cents value.
`onblur`	`(e: FocusEvent) => void`	–	Called when the input loses focus. The display is re-formatted first.