다른 컴포넌트 보기
COMPONENT / 폼과 입력
Input
한 줄 텍스트 입력.
PLAYGROUND
사용 코드
import { useState } from 'react';
import * as W from 'woosign-system';
// ThemeProvider와 ToastProvider 안에서 렌더링하세요.
export function Example() {
const [input, setInput] = useState('');
return (
<W.Input
value={input}
onChangeText={setInput}
placeholder="당신의 이름"
disabled={false}
inputProps={{ 'aria-label': '이름' }}
/>
);
}
API
타입 정의 ↗| Prop | Type | 필수 |
|---|---|---|
variant | InputVariant | — |
size | InputSize | — |
placeholder | string | — |
value | string | — |
defaultValue | string | — |
disabled | boolean | — |
readOnly | boolean | — |
onChangeText | (text: string) => void | — |
onFocus | () => void | — |
onBlur | () => void | — |
onSubmitEditing | () => void | — |
fullWidth | boolean | — |
leftIcon | ReactNode | — |
rightIcon | ReactNode | — |
type | 'text' | 'password' | 'email' | 'number' | 'tel' | 'url' | 'date' | — |
autoCapitalize | 'none' | 'sentences' | 'words' | 'characters' | — |
autoCorrect | boolean | — |
autoFocus | boolean | — |
keyboardType | | 'default'
| 'email-address'
| 'numeric'
| 'phone-pad'
| 'decimal-pad'
| 'url' | — |
returnKeyType | 'done' | 'go' | 'next' | 'search' | 'send' | — |
maxLength | number | — |
multiline | boolean | — |
numberOfLines | number | — |
공통 API 기준입니다. 플랫폼별 style, className 및 세부 타입은 타입 정의에서 확인하세요.
← 전체 컴포넌트로 돌아가기