Input

@hua-labs/ui

v1.1.0

에러 상태 처리와 포커스 관리가 내장된 스타일링된 텍스트 입력 컴포넌트입니다.

설치

bash

npm install @hua-labs/hua

Import

tsx

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

@hua-labs/ui의 UI 컴포넌트를 @hua-labs/hua에서 통합 제공합니다.

UI 컴포넌트, 모션 훅, i18n을 하나의 패키지로 사용할 수 있습니다.

라이브 데모

기본 입력

이름

입력 타입

Password

Number

Date

상태

기본

비활성화

에러

아이콘과 함께

Props

이름	타입	기본값	설명
`variant`	`"default" \| "outline" \| "filled" \| "glass"`	`"default"`	시각적 스타일 변형
`error`	`boolean`	`false`	Error state indicator
`success`	`boolean`	`false`	Success state indicator
`type`	`string`	`"text"`	입력 타입 (text, email, password, number 등)
`placeholder`	`string`	-	플레이스홀더 텍스트
`disabled`	`boolean`	`false`	입력 비활성화
`aria-invalid`	`boolean`	`false`	Indicates input has validation error
`leftIcon`	`React.ReactNode`	-	입력 왼쪽에 표시되는 아이콘

코드 예시

기본 사용법tsx

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

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

에러 상태tsx

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

아이콘과 함께tsx

<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>

접근성

•레이블 연결: 항상 htmlFor와 id가 일치하는 Label 컴포넌트 사용
•에러 상태: 설정 시 aria-invalid가 자동 적용
•포커스 표시: 키보드 탐색을 위한 명확한 포커스 링

Link Badge