Input
Single-line text entry for names, amounts, IBANs and search.
SAR
Available balance: 248,500.00 SAR
input-demo.tsx
import { Input } from "@thanawi/ui";
import { Bilingual, type ExampleProps } from "./_bilingual";
const copy = {
en: { label: "Amount", currency: "SAR", balance: "Available balance: 248,500.00 SAR" },
ar: { label: "المبلغ", currency: "ر.س", balance: "الرصيد المتاح: 248,500.00 ر.س" },
} as const;
export default function InputDemo({ locale }: ExampleProps) {
return (
<Bilingual locale={locale} copy={copy} className="grid gap-8 sm:grid-cols-2">
{(t) => (
<Input
label={t.label}
inputMode="decimal"
placeholder="0.00"
defaultValue="12,500.00"
endAdornment={t.currency}
description={t.balance}
size="lg"
/>
)}
</Bilingual>
);
}Installation
pnpm add @thanawi/uiUsage
import { Input } from '@thanawi/ui';<Input type="email" dir="ltr" placeholder="name@company.com" />Guidelines
Coming soon
Variants, states, accessibility notes and RTL behavior for Input will be documented here when the component lands in @thanawi/ui.