Text Field

사용자가 텍스트 값을 입력·수정하는 기본 입력 컴포넌트예요. 상태·검증·보조 정보·아이콘 조합으로 다양한 입력 상황을 지원해요.

Input

기본 컨트롤(높이 40px). 순수 표현이라 RSC 호환.

tsx

import { Input } from '@openiot/ui'

<Input type="email" placeholder="name@openiot.app" />

상태·검증

state 로 default·error·success, 그리고 disabled·readonly 를 표현해요.

아이콘·비밀번호

leftIcon·rightIcon 으로 아이콘을 넣어요. 비밀번호는 PasswordInput 이 표시/숨김 토글을 제공해요.

tsx

import { Input, PasswordInput } from '@openiot/ui'
import { Icon, Search } from '@openiot/icons'

<Input leftIcon={<Icon icon={Search} size={18} />} placeholder="검색" />
<PasswordInput placeholder="비밀번호" />

TextField (라벨 + 검증)

라벨·보조 텍스트·검증 메시지를 묶은 폼 필드예요. <label> 로 감싸 자동 연결돼요.

이메일*닉네임(선택)2~16자, 한글/영문/숫자이메일

올바른 이메일 형식이 아니에요.이메일

사용 가능한 이메일이에요.

tsx

import { TextField } from '@openiot/ui'

<TextField label="이메일" required placeholder="name@openiot.app" />
<TextField label="이메일" error="올바른 이메일 형식이 아니에요." />

Textarea

여러 줄 입력. 같은 state 검증을 지원해요.

Props

Prop	Type	Default	설명
state	'default' \| 'error' \| 'success'	'default'	검증 상태 (테두리·링 색)
leftIcon	ReactNode	—	앞쪽 장식 아이콘 (예: 검색)
rightIcon	ReactNode	—	뒤쪽 아이콘/버튼
label / required / optional	string / boolean	—	TextField: 라벨과 필수·선택 표시
helperText / error / success	ReactNode / string	—	TextField: 보조 텍스트·검증 메시지
...props	InputHTMLAttributes	—	나머지 네이티브 input 속성