 |
VOOZH | about |
|
VOOZH | about |
Captures multi-line user input.
<TextArea placeholder="Reply to comment…" />
This component is based on the textarea element and supports common margin props.
| Prop | Type | Default |
|---|---|---|
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 |
Use the size prop to control the size.
<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>
Use the variant prop to control the visual style.
<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>
Use the color prop to assign a specific color.
<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>
Use the radius prop to assign a specific radius value.
<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>
Use the resize prop to enable resizing on one or both axis.
<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>