# Naira input

Naira input is a neobrutalist React component from Cruise UI. A ₦ amount field that formats 12,500 as you type and gives back a plain number.

Install (with the @cruiseui registry in components.json, see Installation):

```bash
npx shadcn@latest add @cruiseui/naira-input
```

Import: `import { CruiseNairaInput } from "@/components/cruise/naira-input";`

## When to use

Any amount of money in naira: prices, transfers, budgets.

## When not to

Other currencies. Ranges (use a Slider).

## Example (React)

```tsx
"use client";

import { useState } from "react";
import { CruiseNairaInput } from "@/components/cruise/naira-input";

export default function NairaInputExample() {
  const [amount, setAmount] = useState<number | null>(12500);
  return (
    <div className="grid gap-6 md:grid-cols-2">
      <div className="flex flex-col gap-2">
        <CruiseNairaInput
          label="Amount"
          required
          defaultValue={12500}
          min={1000}
          max={500000}
          hint="Between ₦1,000 and ₦500,000."
          onValueChange={setAmount}
        />
        <p className="text-small text-ink-muted">Value: {amount === null ? "empty" : amount}</p>
      </div>
      <CruiseNairaInput label="Price with kobo" kobo placeholder="0.00" />
    </div>
  );
}
```

## HTML

Needs theme.css (https://cruiseui.dev/theme.css).

```html
<div class="field">
  <label class="field-label" for="amount">Amount (₦)</label>
  <div class="input-group">
    <span class="input-prefix" aria-hidden="true">₦</span>
    <input class="input-bare" id="amount" inputmode="decimal" autocomplete="off" data-naira data-min="1000" data-max="500000">
  </div>
  <input type="hidden" name="amount">
</div>
```

## Props: CruiseNairaInput

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `label?` | `string` | — | Visible label. Leave out inside a CruiseFormField (it brings the label). |
| `hint?` | `string` | — | — |
| `error?` | `string` | — | Your own error; min/max messages are added for you. |
| `value?` | `number \| null` | — | — |
| `defaultValue?` | `number \| null` | — | — |
| `onValueChange?` | `((value: number \| null) => void)` | — | The plain number (12500), or null when empty. |
| `onValidate?` | `((message: string \| undefined) => void)` | — | Called with the min/max message (or undefined) after the field is left. |
| `kobo?` | `boolean` | `false` | Allow kobo: up to two decimal places. |
| `min?` | `number` | — | — |
| `max?` | `number` | — | — |

Also takes every native `<input>` attribute.

## Accessibility

- inputMode="decimal" opens the number pad on phones.
- The caret stays in place while commas are added.
- Min / max messages show after leaving the field, through the FormField error.