複数行のユーザー入力を取得します。
<TextArea placeholder="Reply to comment…" />
このコンポーネントはtextarea要素に基づいており、共通のマージンプロパティをサポートしています。
| プロパティ | 型 | デフォルト値 |
|---|---|---|
size | レスポンシブ<"1" | "2" | "3"> | "2" |
variant | "classic" | "surface" | "soft" | "surface" |
resize | レスポンシブ<"none" | "vertical" | "horizontal" | "both"> | デフォルト値なし |
color | 列挙型 | デフォルト値なし |
radius | "none" | "small" | "medium" | "large" | "full" | デフォルト値なし |
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>
variantプロパティを使用して視覚スタイルを制御します。
<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プロパティを使用して特定の色を割り当てます。
<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プロパティを使用して特定の角丸値を割り当てます。
<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プロパティを使用して、一方向または両方向のサイズ変更を有効にします。
<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>