@gpters-internal/ui

Input

텍스트 입력을 받는 기본 폼 요소

Basic Usage

기본 텍스트 입력 필드입니다.

tsx
<Input type="text" placeholder="Enter your text" />

Input Types

다양한 input type을 지원합니다.

tsx
<Input type="text" placeholder="Text input" />
<Input type="email" placeholder="you@example.com" />
<Input type="password" placeholder="••••••••" />
<Input type="number" placeholder="0" />
<Input type="file" />

States

Input의 다양한 상태를 표현할 수 있습니다.

tsx
<Input placeholder="Default state" />
<Input placeholder="Disabled" disabled />
<Input placeholder="Invalid input" aria-invalid="true" />

With Label

Label 컴포넌트와 함께 사용하여 접근성을 높입니다.

tsx
<div className="grid w-full max-w-sm items-center gap-1.5">
  <Label htmlFor="email">Email</Label>
  <Input type="email" id="email" placeholder="you@example.com" />
</div>

Usage

tsx
import { Input } from '@gpters-internal/ui';

function Example() {
  return (
    <Input
      type="email"
      placeholder="you@example.com"
      onChange={(e) => console.log(e.target.value)}
    />
  );
}