Themes
Advanced
Utils
Components

Text Area

다중 행 사용자 입력을 받습니다.

View sourceReport an issueView in Playground
<TextArea placeholder="Reply to comment…" />

API Reference

이 컴포넌트는 textarea 요소를 기반으로 하며 common margin props를 지원합니다.

PropTypeDefault
size
Responsive<"1" | "2" | "3">
"2"
variant
"classic" | "surface" | "soft"
"surface"
resize
Responsive<"none" | "vertical" | "horizontal" | "both">
No default value
color
enum
No default value
radius
"none" | "small" | "medium" | "large" | "full"
No default value

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>
PreviousToast
NextText Field
Edit this page on GitHub.