Input
Input 컴포넌트는 사용자로부터 텍스트 데이터를 입력받기 위한 UI 요소입니다. 이 컴포넌트는 다양한 사이즈와 상태를 지원하며, 아이콘, 텍스트, 버튼 등의 요소를 앞뒤에 배치할 수 있습니다.
인터랙티브 예제
기본 입력 필드
아래 UI에서 다양한 속성을 직접 변경하여 Input 컴포넌트의 모습을 확인해보세요.
도움말 텍스트입니다
requiredboolean
필수 입력 여부
labelstring
라벨 텍스트
hintTextstring
도움말 텍스트
sizeselect
disabledboolean
비활성화 상태
validationboolean
유효성 검사 성공 상태
destructiveboolean
오류 상태
leadingElementpreset
입력 필드 앞쪽에 표시될 요소
trailingElementpreset
입력 필드 뒤쪽에 표시될 요소
showHelpIconboolean
도움말 아이콘 표시 여부
clearTextboolean
텍스트 지우기 버튼 표시 여부
패스워드 입력 필드
아래 UI에서 다양한 속성을 직접 변경하여 PasswordInput 컴포넌트의 모습을 확인해보세요.
8자리 이상의 비밀번호를 입력해주세요
requiredboolean
필수 입력 여부
labelstring
라벨 텍스트
hintTextstring
도움말 텍스트
sizeselect
disabledboolean
비활성화 상태
validationboolean
유효성 검사 성공 상태
destructiveboolean
오류 상태
showHelpIconboolean
도움말 아이콘 표시 여부
clearTextboolean
텍스트 지우기 버튼 표시 여부
기본 사용법
import { InputBase } from '@ncds/ui-admin';
function App() {
return <InputBase placeholder="텍스트를 입력하세요" />;
}
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| size | 'sm' | 'md' | 'md' | 입력 필드의 크기 |
| type | 'text' | 'password' | 'number' | 'email' | 'text' | 입력 필드의 타입 |
| state | 'default' | 'error' | 'success' | 'default' | 입력 필드의 상태 |
| inputRef | RefCallback<HTMLInputElement> | MutableRefObject<HTMLInputElement | null> | - | 입력 필드에 대한 참조 |
| onChange | (e: ChangeEvent<HTMLInputElement>) => void | - | 값이 변경될 때 호출되는 함수 |
상세 예제 (Detailed Examples)
크기 (Size)
Input 컴포넌트는 두 가지 크기를 지원합니다: xs와 md.
레이블과 힌트 텍스트
레이블과 힌트 텍스트를 사용하여 사용자에게 입력 필드에 대한 정보를 제공할 수 있습니다.
회사 이메일을 입력해주세요
유효성 검증과 오류 상태
validation과 destructive 속성을 사용하여 입력 필드의 상태를 표시할 수 있습니다.
사용 가능한 사용자 이름입니다
이미 사용 중인 사용자 이름입니다
앞/뒤 요소
입력 필드 앞이나 뒤에 다양한 요소를 추가할 수 있습니다.
아이콘 요소
텍스트 요소
텍스트 요소는 leadingElement에 사용할 수 있습니다.
https://
버튼 요소
버튼 요소는 trailingElement에 사용할 수 있습니다.
텍스트 지우기 버튼
clearText와 onClearText 속성을 사용하여 입력 필드의 내용을 지울 수 있는 버튼을 추가할 수 있습니다.
비활성화 상태
disabled 속성을 사용하여 입력 필드를 비활성화 상태로 표시할 수 있습니다.
패스워드 입력 필드
비밀번호 입력을 위한 특수 컴포넌트도 제공됩니다.
복합 예제
여러 속성을 조합하여 다양한 형태의 입력 필드를 구성할 수 있습니다.