← Kitchen Sink로 돌아가기
기본 사용법
기본 input 필드입니다. type과 placeholder를 설정할 수 있습니다.
<Input type="text" placeholder="이름을 입력하세요" /> <Input type="email"
placeholder="이메일을 입력하세요" /> <Input type="password" placeholder="비밀번호를
입력하세요" />
다양한 Input Type
지원하는 다양한 input type 예시입니다.
<Input type="text" placeholder="텍스트 입력" /> <Input type="email"
placeholder="이메일 입력" /> <Input type="password" placeholder="비밀번호 입력"
/> <Input type="number" placeholder="숫자 입력" /> <Input type="tel"
placeholder="전화번호 입력" /> <Input type="url" placeholder="URL 입력" />
<Input type="search" placeholder="검색어 입력" />
상태별 스타일링
disabled 및 aria-invalid 상태에 대한 스타일링이 자동으로 적용됩니다.
<Input type="text" placeholder="일반 입력 필드" /> <Input type="text"
placeholder="비활성화된 필드" disabled /> <Input type="text" placeholder="에러 상태"
aria-invalid="true" />
Field와 함께 사용
Field 컴포넌트와 함께 사용하여 완전한 폼 필드를 구성할 수 있습니다.
<Field> <FieldLabel label="이메일 주소" htmlFor="email-field" /> <Input
id="email-field" type="email" placeholder="example@email.com" /> <FieldDescription
desc="이메일 주소를 입력해주세요" slot="description" /> </Field>
접근성 속성
required, aria-invalid, aria-describedby 속성을 지원합니다.
<Field> <FieldLabel label="필수 입력 필드" htmlFor="required-field" />
<Input id="required-field" type="text" required /> <FieldDescription desc="이
필드는 필수입니다" slot="description" /> </Field> <Field> <FieldLabel
label="에러 상태 필드" htmlFor="error-field" /> <Input id="error-field" type="text"
aria-invalid="true" aria-describedby="error-message" /> <FieldDescription
id="error-message" desc="올바른 값을 입력해주세요" slot="description" /> </Field>
Input Props
| Prop |
Type |
Default |
Description |
type |
'text' | 'email' | 'password' | 'number' | 'tel' | 'url' | 'search' | 'date' |
'time' | 'datetime-local' | 'month' | 'week' |
'text' |
input 타입 |
placeholder |
string |
- |
플레이스홀더 텍스트 |
disabled |
boolean |
false |
비활성화 상태 |
required |
boolean |
false |
필수 입력 여부 |
aria-invalid |
boolean | 'true' | 'false' |
- |
유효하지 않은 값 여부 (접근성) |
aria-describedby |
string |
- |
설명 요소 ID (접근성) |
class |
string |
- |
추가 CSS 클래스 |