Textarea
Textarea
は、複数行のテキスト入力を取得するために使用されるコンポーネントです。
インポート
import { Textarea } from "@yamada-ui/react"
使い方
編集可能な例
<Textarea placeholder="basic"></Textarea>
バリアントを変更する
編集可能な例
<VStack> <For each={["outline", "filled", "flushed", "unstyled"]}> {(variant, index) => ( <Textarea key={index} variant={variant} placeholder={variant} /> )} </For> </VStack>
サイズを変更する
編集可能な例
<VStack> <Textarea placeholder="extra small size" size="xs" /> <Textarea placeholder="small size" size="sm" /> <Textarea placeholder="medium size" size="md" /> <Textarea placeholder="large size" size="lg" /> </VStack>
リサイズの設定
resize
プロパティを使用して、Textarea
のリサイズの挙動を制御できます。
編集可能な例
<VStack> <For each={["block", "horizontal", "vertical", "none"]}> {(resize, index) => ( <Textarea key={index} resize={resize} placeholder={resize} /> )} </For> </VStack>
高さを自動調整する
高さを自動調整する場合は、autosize
をtrue
に設定します。
最小の行数を指定する場合は、minRows
に数値を設定します。
最大の行数を指定する場合は、maxRows
に数値を設定します。
編集可能な例
<VStack> <Textarea autosize placeholder="autosize" /> <Textarea autosize minRows={4} placeholder="autosize, min rows 4" /> <Textarea autosize maxRows={4} placeholder="autosize, max rows 4" /> </VStack>
高さの自動調整をハンドルする
高さの自動調整をハンドルする場合は、resizeRef
にref
を設定します。設定されたref
にコールバック関数が付与されるので、それを実行します。
編集可能な例
const resizeRef = useRef<() => void>(null) const onResize = () => { if (resizeRef.current) resizeRef.current() } return ( <> <VStack> <Textarea placeholder="use resize" resizeRef={resizeRef} /> <Button alignSelf="flex-end" onClick={onResize}> Resize </Button> </VStack> </> )
ボーダーのカラーを変更する
ボーダーのカラーを変更する場合は、focusBorderColor
またはerrorBorderColor
にカラーを設定します。
編集可能な例
<VStack> <Textarea focusBorderColor="green.500" placeholder="custom border color" /> <Textarea isInvalid errorBorderColor="orange.500" placeholder="custom border color" /> </VStack>
プレースホルダーのカラーを変更する
プレースホルダーのカラーを変更する場合は、_placeholder
にprops
を設定します。
編集可能な例
<VStack> <Textarea placeholder="custom placeholder" _placeholder={{ opacity: 1, color: "gray.500" }} /> <Textarea color="green.500" placeholder="custom placeholder" _placeholder={{ color: "inherit" }} /> </VStack>
無効化する
無効化する場合は、isDisabled
をtrue
に設定します。
編集可能な例
<VStack> <Textarea isDisabled variant="outline" placeholder="outline" /> <Textarea isDisabled variant="filled" placeholder="filled" /> <Textarea isDisabled variant="flushed" placeholder="flushed" /> <Textarea isDisabled variant="unstyled" placeholder="unstyled" /> <FormControl isDisabled label="Feedback" helperMessage="We would like to get your feedback." > <Textarea variant="outline" placeholder="your feedback" /> </FormControl> </VStack>
読み取り専用にする
読み取り専用にする場合は、isReadOnly
をtrue
に設定します。
編集可能な例
<VStack> <Textarea isReadOnly variant="outline" placeholder="outline" /> <Textarea isReadOnly variant="filled" placeholder="filled" /> <Textarea isReadOnly variant="flushed" placeholder="flushed" /> <Textarea isReadOnly variant="unstyled" placeholder="unstyled" /> <FormControl isReadOnly label="Feedback" helperMessage="We would like to get your feedback." > <Textarea variant="outline" placeholder="your feedback" /> </FormControl> </VStack>
無効な入力にする
無効な入力にする場合は、isInvalid
をtrue
に設定します。
編集可能な例
<VStack> <Textarea isInvalid variant="outline" placeholder="outline" /> <Textarea isInvalid variant="filled" placeholder="filled" /> <Textarea isInvalid variant="flushed" placeholder="flushed" /> <Textarea isInvalid variant="unstyled" placeholder="unstyled" /> <FormControl isInvalid label="Feedback" errorMessage="Feedback is required."> <Textarea variant="outline" placeholder="your feedback" /> </FormControl> </VStack>
React Hook Form
を使う
編集可能な例
const { register, handleSubmit, watch, formState: { errors }, } = useForm() const onSubmit = (data) => console.log("submit:", data) console.log("watch:", watch()) return ( <VStack as="form" onSubmit={handleSubmit(onSubmit)}> <FormControl isInvalid={!!errors.textarea} label="Feedback" errorMessage={errors.textarea ? errors.textarea.message : undefined} > <Textarea placeholder="your feedback" {...register("textarea", { required: { value: true, message: "This is required." }, })} /> </FormControl> <Button type="submit" alignSelf="flex-end"> Submit </Button> </VStack> )
GitHubでこのページを編集する