TextInput

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

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

Property

Size

TextInput의 크기를 설정합니다.

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의 타입을 설정합니다.

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

Loading component documentation...

On this page