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 it with npx shadcn@latest add @cruiseui/naira-input.
Install
Terminal
npx shadcn@latest add @cruiseui/naira-inputFirst time? Installation shows the one-off components.json setup (the @cruiseui registry) and how to turn the theme on.
Example
Corners
Between ₦1,000 and ₦500,000.
Value: 12500
"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>
);
}
<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>Needs theme.css. Interactive parts (menus, tabs, drawers) also need the script in the spec for that component.
When to use it
When to use
Any amount of money in naira: prices, transfers, budgets.
When not to
Other currencies. Ranges (use a Slider).
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.