Input Group
An input with add-ons attached: text before or after it, an icon with a keyboard shortcut, an action button at its end, or a currency. Each is a prop of Input.
Preview
Mirrored is the same English content laid out right to left: it separates a mirroring bug from a translation one.
Installation
Add the component
npx ritla add inputAlso works with shadcn:
npx shadcn@latest add @ritla/inputDependencies it brings
@base-ui/react@phosphor-icons/reactOr copy by hand
Installing by hand copies the component's source into your project. The source comes with a Ritla UI license, so the CLI is the short way to the same files.
Usage
import { Input } from "@/components/ui/input";<Input label="Website" dir="ltr" prefix="https://" defaultValue="example.com" />API reference
Input
Figma's five types and their props: Prefix → prefix, Suffix → suffix, Icon and shortcut → leadingIcon with shortcut, Trailing icon → action, Currency → prefix with the currency code. For a button beside the field, use Button group.
| Prop | Type | Default | Description |
|---|---|---|---|
prefix | ReactNode | None | Text before the value (“https://”, “JOD”). |
suffix | ReactNode | None | Text after the value (“@example.com”). |
leadingIcon | IconComponent | None | An icon at the start of the field. |
shortcut | ReactNode[] | None | The shortcut keys at the end of the field, a hint only: put aria-keyshortcuts on the input and handle the keys yourself. |
action | ReactNode | None | A button at the end of the field, such as a ghost xs Icon Button that copies the value. |
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 | To the field, then to the action button if there is one. |
ARIA
- The text before and after the value isn't part of it: say the format in the helper text if readers need it.
- The shown shortcut is hidden from screen readers;
aria-keyshortcutson the input is what's announced. - The action button needs a name (“Copy the code”), and its result goes in the helper text.
Arabic and RTL notes
Mirrors
- In Arabic fields the prefix moves to the right and the suffix to the left.
Does not mirror
- URLs, emails, codes and amounts are
dir="ltr": “https://” and “JOD” stay before the value in Arabic forms too. - The shortcut stays left to right (“⌘ K”).
- Numerals
- Amounts stay as typed; for formatted numbers use Number Input.
- Arabic typography
- The prefix is
label-16and the suffixlabel-12, as in Figma. - Mixed-direction text
- The prefix and suffix sit in
<bdi>, so they never mix with the value.
Checks it passes
The Ritla checks this component satisfies by construction. Used as documented, it does not bring these defects onto your page.
- Arabic text falling back past the declared font family (measured, declared, or a webfont that failed to load)
- letter-spacing applied to Arabic text (breaks the connected script)
- Clipped text: content wider than its box with overflow hidden and no ellipsis
- Fixed-pixel-width container whose Arabic text exceeds the space