Input

v1.1.0

bash

npm install @hua-labs/hua

tsx

import { Input } from "@hua-labs/hua";

Password

Number

Date


`variant`	`"default" \| "outline" \| "filled" \| "glass"`	`"default"`	Visual style variant
`error`	`boolean`	`false`	Error state indicator
`success`	`boolean`	`false`	Success state indicator
`type`	`string`	`"text"`	Input type (text, email, password, number, etc.)
`placeholder`	`string`	-	Placeholder text
`disabled`	`boolean`	`false`	Disables the input
`aria-invalid`	`boolean`	`false`	Indicates input has validation error
`className`	`string`	-	Additional CSS classes
`ref`	`React.Ref<HTMLInputElement>`	-	Forwarded ref to the input element

docs:common.basicUsagetsx

import { Input, Label } from '@hua-labs/hua';

<div className="space-y-2">
  <Label htmlFor="name">Name</Label>
  <Input id="name" placeholder="Enter your name" />
</div>

Error Statetsx

<Input
  type="email"
  placeholder="Email"
  aria-invalid={true}
/>

docs:common.withIconstsx

<div className="relative">
  <MagnifyingGlass className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
  <Input className="pl-10" placeholder="Search..." />
</div>

•Label Association: Always use Label component with htmlFor matching input id
•Error State: Use aria-invalid for validation errors
•Focus Visible: Clear focus ring for keyboard navigation

Link Badge