Textarea

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

export default function DefaultTextarea() {
    return (
        <Box display="flex" alignItems="center" justifyContent="center" width="100%">
            <Textarea placeholder="여러 줄 텍스트를 입력하세요..." />
        </Box>
    );
}

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

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

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

export default function TextareaAutoResize() {
    return (
        <Box display="flex" alignItems="center" justifyContent="center" width="100%">
            <Textarea autoResize placeholder="텍스트를 입력하면 자동으로 높이가 조절됩니다..." />
        </Box>
    );
}

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

export default function TextareaStates() {
    return (
        <Grid.Root templateColumns="1" gap="$100">
            <Grid.Item>
                <Textarea placeholder="Default state" />
            </Grid.Item>
            <Grid.Item>
                <Textarea disabled placeholder="Disabled state" />
            </Grid.Item>
            <Grid.Item>
                <Textarea invalid placeholder="Invalid state" />
            </Grid.Item>
            <Grid.Item>
                <Textarea readOnly defaultValue="Read only content" />
            </Grid.Item>
        </Grid.Root>
    );
}

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

export default function TextareaCharacterCount() {
    return (
        <Box display="flex" alignItems="center" justifyContent="center">
            <Textarea placeholder="Type your message..." maxLength={100} />
        </Box>
    );
}