Leave Yamada UI a star

Star
Yamada UIYamada UIv1.7.2

Textarea

Textarea is a component used to obtain multi-line text input.

Source@yamada-ui/textarea

Import

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

Usage

Editable example

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

Change Variants

Editable example

<VStack>
  <For each={["outline", "filled", "flushed", "unstyled"]}>
    {(variant, index) => (
      <Textarea key={index} variant={variant} placeholder={variant} />
    )}
  </For>
</VStack>
Copied!

Change Size

Editable example

<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>
Copied!

Resize Settings

Use the resize property to control the resize behavior of the Textarea.

Editable example

<VStack>
  <For each={["block", "horizontal", "vertical", "none"]}>
    {(resize, index) => (
      <Textarea key={index} resize={resize} placeholder={resize} />
    )}
  </For>
</VStack>
Copied!

Auto-sizing Height

To auto-size the height, set autosize to true.
To specify a minimum number of rows, set a number to minRows.
To specify a maximum number of rows, set a number to maxRows.

Editable example

<VStack>
  <Textarea autosize placeholder="autosize" />
  <Textarea autosize minRows={4} placeholder="autosize, min rows 4" />
  <Textarea autosize maxRows={4} placeholder="autosize, max rows 4" />
</VStack>
Copied!

Handling Auto-Adjusting Height

To handle auto-adjusting height, set a ref to resizeRef. A callback function will be attached to the set ref, so execute it.

Editable example

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>
  </>
)
Copied!

Change Border Color

To change the border color, set the color to focusBorderColor or errorBorderColor.

Editable example

<VStack>
  <Textarea focusBorderColor="green.500" placeholder="custom border color" />
  <Textarea
    isInvalid
    errorBorderColor="orange.500"
    placeholder="custom border color"
  />
</VStack>
Copied!

Change Placeholder Color

To change the placeholder color, set props to _placeholder.

Editable example

<VStack>
  <Textarea
    placeholder="custom placeholder"
    _placeholder={{ opacity: 1, color: "gray.500" }}
  />
  <Textarea
    color="green.500"
    placeholder="custom placeholder"
    _placeholder={{ color: "inherit" }}
  />
</VStack>
Copied!

Disable

To disable, set isDisabled to true.

Editable example

<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>
Copied!

Make Read-Only

To make read-only, set isReadOnly to true.

Editable example

<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>
Copied!

Make Input Invalid

To make the input invalid, set isInvalid to true.

Editable example

<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>
Copied!

Use React Hook Form

Editable example

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>
)
Copied!

Edit this page on GitHub

PreviousPhoneInputNextRadio