Text Area

Text Area

여러 줄의 사용자 입력을 받는 컴포넌트예요.

출처: 문서

본문

댓글, 본문 등 여러 줄에 걸친 텍스트를 입력받는 영역이에요.

<TextArea placeholder="Reply to comment…" />

이 컴포넌트는 textarea 요소를 기반으로 하며, 공통 margin props를 지원해요.

예시 (Examples)

Size

size prop으로 크기를 제어할 수 있어요.

<Flex direction="column" gap="3">
  <Box maxWidth="200px">
    <TextArea size="1" placeholder="Reply to comment…" />
  </Box>

  <Box maxWidth="250px">
    <TextArea size="2" placeholder="Reply to comment…" />
  </Box>

  <Box maxWidth="300px">
    <TextArea size="3" placeholder="Reply to comment…" />
  </Box>
</Flex>

Variant

variant prop으로 시각적 스타일을 제어할 수 있어요.

<Flex direction="column" gap="3" maxWidth="250px">
  <TextArea variant="surface" placeholder="Reply to comment…" />

  <TextArea variant="classic" placeholder="Reply to comment…" />

  <TextArea variant="soft" placeholder="Reply to comment…" />
</Flex>

Color

color prop으로 특정 색상을 지정할 수 있어요.

<Flex direction="column" gap="3" maxWidth="250px">
  <TextArea color="blue" variant="soft" placeholder="Reply to comment…" />

  <TextArea color="green" variant="soft" placeholder="Reply to comment…" />

  <TextArea color="red" variant="soft" placeholder="Reply to comment…" />
</Flex>

Radius

radius prop으로 특정 둥근 모서리 값을 지정할 수 있어요.

<Flex direction="column" gap="3" maxWidth="250px">
  <TextArea radius="none" placeholder="Search the docs…" />

  <TextArea radius="large" placeholder="Search the docs…" />

  <TextArea radius="full" placeholder="Search the docs…" />
</Flex>

Resize

resize prop으로 한 축 또는 양쪽 축에서 크기 조절을 허용할 수 있어요.

<Flex direction="column" gap="3" maxWidth="250px">
  <TextArea resize="none" placeholder="Search the docs…" />

  <TextArea resize="vertical" placeholder="Search the docs…" />

  <TextArea resize="horizontal" placeholder="Search the docs…" />

  <TextArea resize="both" placeholder="Search the docs…" />
</Flex>

더 알아보기 (Learn more)

• 여러 줄 입력이 필요한 폼(댓글, 피드백 등)에 적합하며, resize로 크기 조절 동작을 정할 수 있어요.