Textarea
Textareaは、複数行のテキスト入力を取得するために使用されるコンポーネントです。
<Textarea placeholder="Placeholder" />
使い方
import { Textarea } from "@yamada-ui/react"
import { Textarea } from "@/components/ui"
import { Textarea } from "@workspaces/ui"
<Textarea />
バリアントを変更する
<VStack>
<For each={["outline", "filled", "flushed"]}>
{(variant) => (
<Textarea
key={variant}
variant={variant}
placeholder={toTitleCase(variant)}
/>
)}
</For>
</VStack>
サイズを変更する
<VStack>
<For each={["xs", "sm", "md", "lg", "xl"]}>
{(size) => (
<Textarea key={size} size={size} placeholder={`Size (${size})`} />
)}
</For>
</VStack>
カラースキームを変更する
<VStack>
<For each={["success", "warning"]}>
{(colorScheme) => (
<Textarea
key={colorScheme}
colorScheme={colorScheme}
placeholder={toTitleCase(colorScheme)}
/>
)}
</For>
</VStack>
無効にする
無効にする場合は、disabledをtrueに設定します。
<VStack>
<For each={["outline", "filled", "flushed"]}>
{(variant) => (
<Textarea
key={variant}
disabled
variant={variant}
placeholder={toTitleCase(variant)}
/>
)}
</For>
</VStack>
読み取り専用にする
読み取り専用にする場合は、readOnlyをtrueに設定します。
<VStack>
<For each={["outline", "filled", "flushed"]}>
{(variant) => (
<Textarea
key={variant}
variant={variant}
placeholder={toTitleCase(variant)}
readOnly
/>
)}
</For>
</VStack>
無効な入力にする
無効な状態にする場合は、invalidをtrueに設定します。
<VStack>
<For each={["outline", "filled", "flushed"]}>
{(variant) => (
<Textarea
key={variant}
variant={variant}
placeholder={toTitleCase(variant)}
invalid
/>
)}
</For>
</VStack>
ボーダーの色を変更する
ボーダーの色を変更する場合は、focusBorderColorまたはerrorBorderColorに値を設定します。
<VStack>
<Textarea focusBorderColor="green.500" placeholder="Custom border color" />
<Textarea
errorBorderColor="orange.500"
invalid
placeholder="Custom border color"
/>
</VStack>
プレースホルダーをカスタマイズする
プレースホルダーの色を変更する場合は、propsに_placeholderを設定します。
<Textarea
placeholder="Custom placeholder"
_placeholder={{ color: "green.500" }}
/>
リサイズの動作を変更する
リサイズの動作を変更する場合は、resizeに"block"、"horizontal"、"vertical"、"none"のいずれかを設定します。
<VStack>
<For each={["block", "horizontal", "vertical", "none"]}>
{(resize) => (
<Textarea
key={resize}
placeholder={toTitleCase(resize)}
resize={resize}
/>
)}
</For>
</VStack>
自動リサイズを使用する
自動リサイズを有効にする場合は、autosizeをtrueに設定します。
<Textarea autosize placeholder="Autosize" />
リサイズを制御する
const resizeRef = useRef<() => void>(null)
const onResize = () => {
resizeRef.current?.()
}
return (
<VStack>
<Textarea placeholder="Use resize" resizeRef={resizeRef} />
<Button alignSelf="flex-end" onClick={onResize}>
Resize
</Button>
</VStack>
)
こちらのコードを使用する場合は、
"use client"をファイルの上部に追加する必要があります。Props
アクセシビリティ
現在、v2の移行に伴い、このセクションは更新中です。