Input

Text input with label, description, and error wired via aria-describedby/aria-invalid automatically — no manual id plumbing.

<Input label="Email" placeholder="you@example.com" className="ui-w-64" />

Editable — change the code above and the preview updates live.

With description and error

<div className="ui-flex ui-w-64 ui-flex-col ui-gap-4">
  <Input label="Username" description="This will be publicly visible." />
  <Input label="Password" type="password" error="Must be at least 8 characters." />
</div>

Editable — change the code above and the preview updates live.

Installation

import { Input } from "@labanaat/ui/input";

Props

Prop	Type	Default	Description
label	string	—	Field label
hideLabel	boolean	false	Visually hides the label while keeping it accessible
description	string	—	Helper text shown below the field
error	string	—	Error message; sets aria-invalid and swaps the border color
startSlot / endSlot	ReactNode	—	Icon or content slots inside the field
size	"sm" \| "md" \| "lg"	"md"	Size scale