TextInput

import { TextInput } from '@vapor-ui/core';

export default function DefaultTextInput() {
    return <TextInput />;
}

Property

Size

TextInput 크기는 sm, md, lg, xl 로 제공합니다.

import { TextInput } from '@vapor-ui/core';

export default function TextInputSize() {
    return (
        <div className="space-y-4 flex flex-col">
            <TextInput size="sm" placeholder="Small size" />
            <TextInput size="md" placeholder="Medium size" />
            <TextInput size="lg" placeholder="Large size" />
            <TextInput size="xl" placeholder="Extra large size" />
        </div>
    );
}

Type

TextInput 타입은 text, email, password, url, tel, search 로 제공합니다.

import { TextInput } from '@vapor-ui/core';

export default function TextInputType() {
    return (
        <div className="space-y-4 flex flex-col">
            <TextInput type="text" placeholder="type='text'" />
            <TextInput type="email" placeholder="type='email'" />
            <TextInput type="password" placeholder="type='password'" />
        </div>
    );
}

Disabled

사용자가 상호작용할 수 없는 상태입니다. 액션을 수행하기 위한 특정 조건을 충족하지 않았거나 일시적으로 기능을 제한하려는 상황에서 사용합니다.

import { TextInput } from '@vapor-ui/core';

export default function TextInputDisabled() {
    return (
        <div className="space-y-3 flex flex-col">
            <TextInput disabled placeholder="비활성화된 입력 필드" />
            <TextInput disabled defaultValue="기본 값이 있는 비활성화 필드" />
        </div>
    );
}

Invalid

유효하지 않은 상태(필수 항목 누락, 잘못된 입력 등)임을 나타냅니다. 사용자에게 시각적 피드백을 제공하여 올바른 입력을 유도할 수 있습니다.

import { TextInput } from '@vapor-ui/core';

export default function TextInputInvalid() {
    return (
        <div className="space-y-3 flex flex-col">
            <TextInput
                type="email"
                invalid
                placeholder="잘못된 이메일 형식"
                defaultValue="invalid-email"
            />
            <TextInput invalid placeholder="필수 입력 항목" />
        </div>
    );
}

Read Only

사용자는 값을 수정할 수 없지만, 텍스트를 복사하거나 읽을 수 있도록 허용하는 상태입니다.

import { TextInput } from '@vapor-ui/core';

export default function TextInputReadOnly() {
    return (
        <div className="space-y-3 flex flex-col">
            <TextInput readOnly defaultValue="수정할 수 없는 값" />
            <TextInput type="email" readOnly defaultValue="user@example.com" />
        </div>
    );
}

Examples

States

TextInput의 다양한 상태를 보여줍니다.

import { TextInput } from '@vapor-ui/core';

export default function TextInputStates() {
    return (
        <div className="space-y-4 flex flex-col">
            <TextInput placeholder="Default state" />
            <TextInput disabled placeholder="Disabled state" />
            <TextInput invalid placeholder="Invalid state" />
            <TextInput readOnly value="Read only value" />
        </div>
    );
}

Props Table

TextInput은 Base UI의 Input을 래핑한 단일 컴포넌트입니다. 다양한 텍스트 입력 타입을 지원하며, 제어형/비제어형 모두 사용할 수 있습니다. 이 컴포넌트는 input 요소를 기반으로 합니다.

Prop	Default	Type
render?	input	ReactElementfunction
type?	text	textemailpasswordurltelsearch
value?	undefined	string
defaultValue?	''	string
onValueChange?	undefined	function
placeholder?	undefined	string
size?	md	smmdlgxl
disabled?	false	boolean
invalid?	false	boolean
readOnly?	false	boolean
required?	false	boolean
autoComplete?	undefined	string
autoFocus?	false	boolean
maxLength?	undefined	number
minLength?	undefined	number
name?	undefined	string
id?	undefined	string
className?	undefined	string
onChange?	undefined	function
onBlur?	undefined	function
onFocus?	undefined	function

On this page