Yamada UIにスターをあげる

スター
Yamada UIYamada UIv1.3.10

Textarea

Textareaは、複数行のテキスト入力を取得するために使用されるコンポーネントです。

ソース@yamada-ui/textarea

インポート

import { Textarea } from "@yamada-ui/react"

使い方

編集可能な例

<Textarea placeholder="basic"></Textarea>

バリアントを変更する

編集可能な例

<VStack>
  <Textarea variant="outline" placeholder="outline" />
  <Textarea variant="filled" placeholder="filled" />
  <Textarea variant="flushed" placeholder="flushed" />
  <Textarea variant="unstyled" placeholder="unstyled" />
</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>
  <Textarea resize="block" placeholder="block" />
  <Textarea resize="horizontal" placeholder="horizontal" />
  <Textarea resize="vertical" placeholder="vertical" />
  <Textarea resize="none" placeholder="none" />
</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でこのページを編集する

前Switch次Toggle