Textarea

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

const Demo = () => {
  return <Textarea placeholder="Comment..." />
}

import { Stack, Textarea } from "@chakra-ui/react"

const Demo = () => {
  return (
    <Stack gap="4">
      <Textarea variant="outline" placeholder="outline" />
      <Textarea variant="subtle" placeholder="subtle" />
      <Textarea variant="flushed" placeholder="flushed" />
    </Stack>
  )
}

import { Stack, Textarea } from "@chakra-ui/react"

const Demo = () => {
  return (
    <Stack gap="4">
      <Textarea size="xs" placeholder="XSmall size" />
      <Textarea size="sm" placeholder="Small size" />
      <Textarea size="md" placeholder="Medium size" />
      <Textarea size="lg" placeholder="Large size" />
      <Textarea size="xl" placeholder="XLarge size" />
    </Stack>
  )
}

import { HStack, Textarea } from "@chakra-ui/react"
import { Field } from "@/components/ui/field"

const Demo = () => {
  return (
    <HStack gap="10" width="full">
      <Field label="Comment" required helperText="Max 500 characters.">
        <Textarea placeholder="Start typing..." variant="subtle" />
      </Field>
      <Field label="Comment" required helperText="Max 500 characters.">
        <Textarea placeholder="Start typing..." variant="outline" />
      </Field>
    </HStack>
  )
}

import { HStack, Textarea } from "@chakra-ui/react"
import { Field } from "@/components/ui/field"

const Demo = () => {
  return (
    <HStack gap="10" width="full">
      <Field invalid label="Comment" required errorText="Field is required">
        <Textarea placeholder="Start typing..." variant="subtle" />
      </Field>
      <Field invalid label="Comment" required errorText="Field is required">
        <Textarea placeholder="Start typing..." variant="outline" />
      </Field>
    </HStack>
  )
}

import { HStack, Input } from "@chakra-ui/react"
import { Field } from "@/components/ui/field"

const Demo = () => {
  return (
    <HStack gap="10" width="full">
      <Field label="Email" required>
        <Input placeholder="me@example.com" variant="subtle" />
      </Field>
      <Field label="Email" required>
        <Input placeholder="me@example.com" variant="outline" />
      </Field>
    </HStack>
  )
}

"use client"

import { Button, Input, Stack, Textarea } from "@chakra-ui/react"
import { Field } from "@/components/ui/field"
import { useForm } from "react-hook-form"

interface FormValues {
  username: string
  bio: string
}

const Demo = () => {
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm<FormValues>()

  const onSubmit = handleSubmit((data) => console.log(data))

  return (
    <form onSubmit={onSubmit}>
      <Stack gap="4" align="flex-start" maxW="sm">
        <Field
          label="Username"
          invalid={!!errors.username}
          errorText={errors.username?.message}
        >
          <Input
            placeholder="@username"
            {...register("username", { required: "Username is required" })}
          />
        </Field>
        <Field
          label="Profile bio"
          invalid={!!errors.bio}
          helperText="A short description of yourself"
          errorText={errors.bio?.message}
        >
          <Textarea
            placeholder="I am ..."
            {...register("bio", { required: "Bio is required" })}
          />
        </Field>
        <Button type="submit">Submit</Button>
      </Stack>
    </form>
  )
}

import { Stack, Textarea } from "@chakra-ui/react"

const Demo = () => {
  return (
    <Stack gap="4" maxWidth="250px">
      <Textarea resize="none" placeholder="Search the docs…" />
      <Textarea resize="vertical" placeholder="Search the docs…" />
      <Textarea resize="horizontal" placeholder="Search the docs…" />
      <Textarea resize="both" placeholder="Search the docs…" />
    </Stack>
  )
}

"use client"

import { chakra, useRecipe } from "@chakra-ui/react"
import AutoResize from "react-textarea-autosize"

const StyledAutoResize = chakra(AutoResize)

const Demo = () => {
  const recipe = useRecipe({ key: "textarea" })
  const styles = recipe({ size: "sm" })
  return (
    <StyledAutoResize
      placeholder="This textarea will autoresize as you type"
      minH="initial"
      resize="none"
      overflow="hidden"
      lineHeight="inherit"
      css={styles}
    />
  )
}