Inputs

TextField

label · helper · error · slot을 포함한 텍스트 입력.

단일 줄 텍스트 입력. 라벨은 useId로 자동 연결되어 접근성 보장, 좌우 슬롯으로 아이콘·키바인딩 힌트 추가 가능.

import { TextField } from "@nxtgen-org/react";

Basic

이름*

실명을 입력해주세요.

tsx

1<TextField
2  label="이름"
3  placeholder="홍길동"
4  helper="실명을 입력해주세요."
5  required
6/>

이메일

올바른 이메일 형식이 아닙니다.

tsx

1<TextField
2  label="이메일"
3  value={email}
4  error={invalid ? "올바른 이메일 형식이 아닙니다." : undefined}
5  onChange={(e) => setEmail(e.target.value)}
6/>

Small

Medium

Large

tsx

1<TextField size="sm" />
2<TextField size="md" />
3<TextField size="lg" />

⌘K

tsx

1<TextField leftSlot={<Search size={16} />} placeholder="검색" />
2<TextField rightSlot={<kbd>⌘K</kbd>} placeholder="검색" />

Name	Type	Default	Description
label	string	—	라벨 텍스트.
helper	string	—	보조 설명.
error	string	—	에러 메시지. 있으면 invalid 스타일.
leftSlot	ReactNode	—	input 좌측 (아이콘 등).
rightSlot	ReactNode	—	input 우측 (키 힌트 등).
size	"sm" \| "md" \| "lg"	"md"	—
required	boolean	—	라벨에 * 표시.
...props	InputHTMLAttributes<HTMLInputElement>	—	표준 input 속성.