Build · New

Input Field

A text field with a visible label and helper text, with the states every Kanz field shares: enabled, hover, focus, error, disabled, read-only and auto-fill.

Preview

Mirrored is the same English content laid out right to left: it separates a mirroring bug from a translation one.

Installation

SoonInstalling from the registry opens at launch. Until then the command below is what it will be.

npx shadcn@latest add @ritla/input-field

Dependencies it brings: @base-ui/react, @phosphor-icons/react

Usage

import { InputField } from "@/components/ui/input-field";

<InputField label="Full name" required name="name" autoComplete="name" helperText="We use it on your receipts." />

Examples

States

An empty field is gray, a filled one white. error with a message replaces the helper text and sets aria-invalid. Hover, focus and auto-fill come from the browser.

Leading and trailing content

leadingIcon and prefix at the start, suffix, trailingIcon and status at the end; they swap sides in Arabic. In dir="ltr" fields (emails, URLs) the row stays left to right.

Text in either language

The field takes dir="auto": each value runs in its own direction, so an English sentence in an Arabic form keeps its punctuation at the end. Emails, URLs and codes are always left to right: pass dir="ltr".

API reference

InputField

Also takes every <input> prop (type, name, value, placeholder, autoComplete, inputMode…).

Prop	Type	Default	Description
`label`	`ReactNode`		Figma's Label. Required and always visible.
`required`	`boolean`	`false`	Figma's Required: the asterisk and `required` on the input.
`helperText`	`ReactNode`		Figma's Helper text.
`error`	`ReactNode \| boolean`		State = Error. A message replaces the helper text; `true` turns the helper text into the error.
`disabled`	`boolean`	`false`	State = Disabled.
`readOnly`	`boolean`	`false`	State = Read-only.
`leadingIcon`	`IconComponent`		_Leading content, Type Icon.
`prefix`	`ReactNode`		_Leading content, Type Text only or Currency.
`suffix`	`ReactNode`		_Trailing content, Type Text.
`trailingIcon`	`IconComponent`		_Trailing content, Type Icon.
`status`	`"success" \| "loading" \| "warning" \| "error" \| "disabled"`		Show Field Status. Decorative: say the status in the helper text too.

Accessibility

Keyboard

Keys are written for left-to-right. In right-to-left the arrow keys swap: the one pointing toward the reading direction moves forward.

Key	Action
`Tab`	Moves focus to the field, with the focus ring around the box (the error ring when invalid).

ARIA

The <label> is tied to the input, and the helper text or error through aria-describedby.
An error sets aria-invalid, and a new error message is read out politely (aria-live="polite").
The asterisk is decorative; required on the input is what's announced.
Use the right type, inputMode and autoComplete (email, tel, numeric).

Arabic and RTL notes

Mirrors

The label, helper text and leading icon sit at the inline start (the right), the status and suffix at the end.
Directional icons mirror.

Does not mirror

With dir="ltr" (emails, URLs, codes) the whole field row runs left to right, like Figma's phone field: “https://” stays before the value and “.ritla.app” after it.
Status icons don't mirror.

Numerals: What people type stays as typed. For numbers use Number Input, which follows numerals.
Arabic typography: Text is label-16, the label and helper label-12, with taller Arabic line heights; the 48px field fits both.
Mixed-direction text: The input takes dir="auto" by default, so each value runs in its own language's direction.

All components ›