---
title: "Number field"
description: "A number typed or stepped, formatted and parsed in the locale. Use formatOptions for currency, percentages and units."
---

> Documentation Index
> Fetch the complete documentation index at: https://epidermis.getarbol.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Number field

## Bounded steps

```tsx
import { NumberField } from '@arbol-ai/ui';

<NumberField
  className="max-w-48"
  defaultValue={2}
  description="How many times the agent calls back."
  label="Call attempts"
  maxValue={5}
  minValue={1}
/>
```

## Currency, percent and units

```tsx
import { NumberField } from '@arbol-ai/ui';

<div className="grid max-w-48 gap-4">
  <NumberField
    defaultValue={85_000}
    formatOptions={{ currency: 'COP', maximumFractionDigits: 0, style: 'currency' }}
    label="Consultation price"
  />
  <NumberField
    defaultValue={0.15}
    formatOptions={{ style: 'percent' }}
    label="Discount"
    maxValue={1}
    minValue={0}
    step={0.05}
  />
  <NumberField
    defaultValue={24}
    formatOptions={{ style: 'unit', unit: 'hour', unitDisplay: 'long' }}
    label="Reminder lead time"
    minValue={1}
  />
</div>
```

## Source

The examples above are [`src/components/number-field/number-field.examples.tsx`](https://github.com/getarbol/project-arbol-ui/blob/main/src/components/number-field/number-field.examples.tsx), which the library's tests render too.

Source: https://epidermis.getarbol.com/components/forms/number-field/index.mdx