InputGroup

'use client';

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

export default function DefaultInputGroup() {
    return (
        <div className="space-y-4">
            <InputGroup.Root>
                <TextInput placeholder="메시지를 입력하세요..." maxLength={100} />
                <InputGroup.Counter />
            </InputGroup.Root>
        </div>
    );
}

Examples

Basic Usage

InputGroup은 입력 컴포넌트(TextInput, Textarea)와 Counter를 조합하여 사용합니다. 입력 컴포넌트에 maxLength가 설정되면 자동으로 "현재글자수/최대글자수" 형태로 표시되고, maxLength가 없으면 현재 글자 수만 표시됩니다.

'use client';

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

export default function InputGroupBasic() {
    return (
        <div className="space-y-4">
            <InputGroup.Root>
                <TextInput placeholder="최대 길이 제한 있음" maxLength={50} />
                <InputGroup.Counter />
            </InputGroup.Root>
            <InputGroup.Root>
                <TextInput placeholder="최대 길이 제한 없음" />
                <InputGroup.Counter />
            </InputGroup.Root>
        </div>
    );
}

With Textarea

InputGroup은 Textarea와도 함께 사용할 수 있습니다.

'use client';

import { InputGroup, Textarea } from '@vapor-ui/core';

export default function InputGroupTextarea() {
    return (
        <div className="space-y-4">
            <InputGroup.Root>
                <Textarea placeholder="긴 텍스트를 입력하세요..." maxLength={200} rows={4} />
                <InputGroup.Counter />
            </InputGroup.Root>
        </div>
    );
}

Custom Counter

Counter는 함수형 children을 지원하여 커스텀 카운터 UI를 구현할 수 있습니다.

0 of undefined characters

'use client';

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

export default function InputGroupCustomCounter() {
    return (
        <div className="space-y-4">
            <InputGroup.Root>
                <TextInput placeholder="커스텀 카운터 예시 1" maxLength={20} />
                <InputGroup.Counter>
                    {({ count, maxLength }) => `${count} of ${maxLength} characters`}
                </InputGroup.Counter>
            </InputGroup.Root>
            <InputGroup.Root>
                <TextInput placeholder="커스텀 카운터 예시 2" maxLength={100} />
                <InputGroup.Counter>
                    {({ count, maxLength, value }) => (
                        <span
                            className={
                                maxLength && count > maxLength * 0.8
                                    ? 'text-red-500'
                                    : 'text-gray-500'
                            }
                        >
                            {count}/{maxLength} {value.length > 50 && '⚠️'}
                        </span>
                    )}
                </InputGroup.Counter>
            </InputGroup.Root>
        </div>
    );
}

Props Table

InputGroup.Root

InputGroup의 루트 컨테이너로, 입력 컴포넌트(TextInput, Textarea)와 Counter를 감싸는 래퍼 역할을 합니다.

Prop	Default	Type
render?	div	ReactElement
className?	null	string
children?	null	React.ReactNode

InputGroup.Counter

문자 수를 표시하는 카운터 컴포넌트입니다. 함수형 children을 통해 커스텀 카운터를 구현할 수 있습니다.

Prop	Default	Type
children?	null	React.ReactNode({ count, maxLength, value }: CounterRenderProps) => React.ReactNode
render?	span	React.ReactElement
className?	null	string