Input

A text input field for capturing user-entered values.

export default function InputHero() {
  return (
    <Field name="email" className="w-64">
      <FieldLabel>Email address</FieldLabel>
      <Input type="email" placeholder="you@example.com" />
    </Field>
  );
}

Installation

pnpm dlx shadcn@latest add "https://ora-ui.com/r/input.json"

Usage

import { Input } from '@/registry/ui/input';

<Input placeholder="Enter a value" />;

Examples

Variant

The variant prop controls the visual style of the input.

export function InputSurface() {
  return <Input placeholder="Email address" />;
}

API Reference

PropTypeDefault
variant"surface" | "outline" | "soft""surface"
classNamestring—

All other props are forwarded to the underlying Base UI Input primitive.