Input

A single-line text input with optional label, hint, and error messaging.

Installation

npx @obi/ui add input

Preview

Email address

Password

Must be at least 8 characters.

Username

That username is already taken.

Usage

import Input from '@/src/components/Input/Input';

export default function Example() {
  return (
    <div className="flex flex-col gap-4 max-w-sm">
      <Input label="Email" placeholder="you@example.com" hint="We will never share your email." />
      <Input label="Username" placeholder="johndoe" error="This username is already taken." />
      <Input label="Disabled" placeholder="Cannot edit" disabled />
    </div>
  );
}

Props

Name	Type	Default	Description
label	string	—	Visible label rendered above the input; also used to derive the input id.
placeholder	string	—	Placeholder text shown when the input is empty.
hint	string	—	Helper text rendered below the input when there is no error.
error	string	—	Error message; switches the input to error state and sets aria-invalid.
disabled	boolean	false	Disables the input.