# AmountInput

Accepts a decimal amount, such as a payment or transfer value.

[View source and API](https://github.com/tempoxyz/ds/blob/main/src/web/components/AmountInput.tsx)

## Overview

An amount input accepts decimal amounts. It keeps the value as a raw string and rejects input that is not a non-negative decimal.

Give the field a visible label, and show the unit with a prefix or suffix.

## Examples

### Basic

```tsx
import { AmountInput, Field, style } from '@tempoxyz/ds'

export function Demo() {
  return (
    <Field.Root {...styles.field()}>
      <Field.Label>Amount</Field.Label>
      <AmountInput.Root>
        <AmountInput.Prefix>$</AmountInput.Prefix>
        <AmountInput.Control placeholder="0.00" />
      </AmountInput.Root>
    </Field.Root>
  )
}

namespace styles {
  export const field = style({ maxWidth: '24rem !custom' })
}
```

[View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/AmountInput/Basic.tsx)

### Size

Set `size` on `AmountInput.Root` to `small`, `medium`, or `large`. It defaults to `medium`.

```tsx
import { AmountInput, Field, style } from '@tempoxyz/ds'

export function Demo() {
  return (
    <div {...styles.grid()}>
      {(['small', 'medium', 'large'] as const).map((size) => (
        <Field.Root key={size}>
          <Field.Label>Amount ({size})</Field.Label>
          <AmountInput.Root size={size}>
            <AmountInput.Prefix>$</AmountInput.Prefix>
            <AmountInput.Control placeholder="0.00" />
            <AmountInput.Max />
          </AmountInput.Root>
        </Field.Root>
      ))}
    </div>
  )
}

namespace styles {
  export const grid = style({
    display: 'grid',
    gap: '6',
    gridTemplateColumns: 'repeat(auto-fill, minmax(min(320px, 100%), 1fr)) !custom',
  })
}
```

[View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/AmountInput/Size.tsx)

### Max

Add `AmountInput.Max` to fill the balance in its `onClick`. It hides while the amount is invalid.

```tsx
import { AmountInput, Field, style } from '@tempoxyz/ds'
import { useState } from 'react'

const balance = 250

export function Demo() {
  const [value, setValue] = useState('')
  const invalid = Number(value) > balance

  return (
    <Field.Root invalid={invalid} {...styles.field()}>
      <Field.Label>Amount</Field.Label>
      <AmountInput.Root onValueChange={setValue} value={value}>
        <AmountInput.Prefix>$</AmountInput.Prefix>
        <AmountInput.Control placeholder="0.00" />
        <AmountInput.Max onClick={() => setValue(String(balance))} />
      </AmountInput.Root>
      <Field.Description>
        Balance: $250.00. Max hides while the amount is invalid.
      </Field.Description>
      <Field.Error match={invalid}>Exceeds your balance.</Field.Error>
    </Field.Root>
  )
}

namespace styles {
  export const field = style({ maxWidth: '24rem !custom' })
}
```

[View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/AmountInput/Max.tsx)

### Suffix

Add `AmountInput.Suffix` to name the unit after the amount.

```tsx
import { AmountInput, Field, style } from '@tempoxyz/ds'

export function Demo() {
  return (
    <Field.Root variant="card" {...styles.field()}>
      <Field.Label>You send</Field.Label>
      <AmountInput.Root defaultValue="1250.5">
        <AmountInput.Prefix>$</AmountInput.Prefix>
        <AmountInput.Control />
        <AmountInput.Suffix>USDC</AmountInput.Suffix>
      </AmountInput.Root>
    </Field.Root>
  )
}

namespace styles {
  export const field = style({ maxWidth: '24rem !custom' })
}
```

[View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/AmountInput/Suffix.tsx)

## Guidelines

TODO: Write guidelines for AmountInput.