Input

PreviousNext

Single-line text input with optional adornments.

import { Input } from "@/rl-ui";

<Input placeholder="Email" />

Examples

Sizes

import { Input } from "@/rl-ui";

<>
<Input size="small" placeholder="Small" />
<Input size="medium" placeholder="Medium" />
<Input size="large" placeholder="Large" />
</>

Clearable

import { Input } from "@/rl-ui";

<Input clearable defaultValue="Ada Lovelace" placeholder="Name" />

Disabled

import { Input } from "@/rl-ui";

<Input disabled placeholder="Disabled" defaultValue="Locked" />

API

PropTypeDefaultDescription
size"small" | "medium" | "large""medium"Field height.
prefixReactNode—Content before the value.
suffixReactNode—Content after the value.
clearablebooleanfalseShows a clear control when filled.
disabledbooleanfalsePrevents editing.
placeholderstring—Empty-state hint.
typestring"text"Native input type.
onPressEnter() => void—Fires on Enter key.