Input · Base UI

Installation

npx shadcn@latest add @soralabs/base-input

Usage

import { Input } from "@/components/sora-ui/base/input";

export default function Page() {
  return <Input placeholder="Type something..." />;
}

Controlled Input

import { useState } from "react";
import { Input } from "@/components/sora-ui/base/input";

export default function Page() {
  const [value, setValue] = useState("");

  return (
    <Input
      aria-label="Project name"
      onChange={(event) => setValue(event.target.value)}
      placeholder="Project name"
      value={value}
    />
  );
}

Input Types

Use the native type prop for common field variants:

<Input aria-label="Email" type="email" />
<Input aria-label="Password" type="password" />
<Input aria-label="Search" type="search" />

RTL

Set dir="rtl" on the input or an ancestor. The animated mirror caret follows the browser's bidirectional text layout, so clicks and selections remain aligned.

<Input aria-label="Arabic text" dir="rtl" placeholder="اكتب هنا" />

Styling and Motion

The component keeps native input behavior while rendering a Motion-powered caret for text, search, url, tel, and password. email, number, date, time, file, and other input types keep the browser's native caret. Pass className to override the default shadcn/ui styles. Animated caret movement respects text selection, horizontal scrolling, and prefers-reduced-motion.

Props

Input supports all native <input> props, including name, value, defaultValue, placeholder, disabled, validation attributes, event handlers, and ref.

Accessibility

Associate the input with a visible label using htmlFor and id. Use aria-invalid when the current value fails validation.

<label htmlFor="email">Email</label>
<Input id="email" aria-invalid={hasError} type="email" />