Input

The Input component is a styled wrapper around the native <input> element. It supports all HTML input types plus a few ergonomic extras.

Import#

import { Input } from "@aidimension/ui/components/input";
import { Label } from "@aidimension/ui/components/label";

Basic usage#

<Input type="email" placeholder="you@example.com" />

With label#

Always pair an input with a label for accessibility:

<div className="space-y-2">
  <Label htmlFor="email">Email</Label>
  <Input id="email" type="email" placeholder="you@example.com" />
</div>

With helper text and error#

<div className="space-y-2">
  <Label htmlFor="password">Password</Label>
  <Input id="password" type="password" aria-invalid={hasError} aria-describedby="pwd-help" />
  <p id="pwd-help" className="text-xs text-muted-foreground">
    {hasError ? "Password must be at least 8 characters." : "At least 8 characters."}
  </p>
</div>

With icon#

<div className="relative">
  <Search className="absolute left-3 top-1/2 -translate-y-1/2 size-4 text-muted-foreground" />
  <Input className="pl-9" placeholder="Search…" />
</div>

Disabled and readonly#

<Input disabled placeholder="Can't edit" />
<Input readOnly value="Read only" />

File input#

<Input type="file" accept="image/*" />

API reference#

All other props are forwarded to the underlying <input>.

Accessibility#

• Always pair with a <Label> (use htmlFor matching the id)
• Use aria-invalid when there's a validation error
• Use aria-describedby to link to helper or error text
• Disabled inputs get aria-disabled automatically

Form integration#

aidimension Input works with any form library. Here's a quick example with react-hook-form:

import { useForm } from "react-hook-form";

function MyForm() {
  const { register, handleSubmit, formState: { errors } } = useForm();
  return (
    <form onSubmit={handleSubmit(console.log)}>
      <div className="space-y-2">
        <Label htmlFor="email">Email</Label>
        <Input
          id="email"
          type="email"
          {...register("email", { required: true })}
          aria-invalid={!!errors.email}
        />
        {errors.email && <p className="text-xs text-danger">Email is required</p>}
      </div>
      <Button type="submit">Submit</Button>
    </form>
  );
}