Textarea
Textarea is a component used to obtain multi-line text input.
<Textarea placeholder="Placeholder" />
Usage
import { Textarea } from "@yamada-ui/react"
import { Textarea } from "@/components/ui"
import { Textarea } from "@workspaces/ui"
<Textarea />
Change Variants
<VStack>
<For each={["outline", "filled", "flushed"]}>
{(variant) => (
<Textarea
key={variant}
variant={variant}
placeholder={toTitleCase(variant)}
/>
)}
</For>
</VStack>
Change Size
<VStack>
<For each={["xs", "sm", "md", "lg", "xl"]}>
{(size) => (
<Textarea key={size} size={size} placeholder={`Size (${size})`} />
)}
</For>
</VStack>
Change Color Scheme
<VStack>
<For each={["success", "warning"]}>
{(colorScheme) => (
<Textarea
key={colorScheme}
colorScheme={colorScheme}
placeholder={toTitleCase(colorScheme)}
/>
)}
</For>
</VStack>
Disable
To disable the input, set disabled to true.
<VStack>
<For each={["outline", "filled", "flushed"]}>
{(variant) => (
<Textarea
key={variant}
disabled
variant={variant}
placeholder={toTitleCase(variant)}
/>
)}
</For>
</VStack>
Read-Only
To read-only, set readOnly to true.
<VStack>
<For each={["outline", "filled", "flushed"]}>
{(variant) => (
<Textarea
key={variant}
variant={variant}
placeholder={toTitleCase(variant)}
readOnly
/>
)}
</For>
</VStack>
Invalid
To set invalid state, set invalid to true.
<VStack>
<For each={["outline", "filled", "flushed"]}>
{(variant) => (
<Textarea
key={variant}
variant={variant}
placeholder={toTitleCase(variant)}
invalid
/>
)}
</For>
</VStack>
Change Border Color
To change the border color, set a color to focusBorderColor or errorBorderColor.
<VStack>
<Textarea focusBorderColor="green.500" placeholder="Custom border color" />
<Textarea
errorBorderColor="orange.500"
invalid
placeholder="Custom border color"
/>
</VStack>
Customize Placeholder
To change the placeholder color, set _placeholder to the props.
<Textarea
placeholder="Custom placeholder"
_placeholder={{ color: "green.500" }}
/>
Change Resize Behavior
To change the resize behavior, set resize to one of "block", "horizontal", "vertical", or "none".
<VStack>
<For each={["block", "horizontal", "vertical", "none"]}>
{(resize) => (
<Textarea
key={resize}
placeholder={toTitleCase(resize)}
resize={resize}
/>
)}
</For>
</VStack>
Use Auto-resize
To enable auto-resizing, set autosize to true.
<Textarea autosize placeholder="Autosize" />
Control Resize
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>
)
If you use this code, you need to add
"use client" to the top of the file.Props
Accessibility
Currently, this section is being updated due to the migration of v2.