Textarea

'use client'

import { Textarea } from '@saas-ui/react'

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

import { Stack } from '@chakra-ui/react'
import { Textarea } from '@saas-ui/react'

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

import { Stack } from '@chakra-ui/react'
import { Textarea } from '@saas-ui/react'

export const TextareaWithSizes = () => {
  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>
  )
}

'use client'

import { HStack } from '@chakra-ui/react'
import { Field, Textarea } from '@saas-ui/react'

export const TextareaWithHelperText = () => {
  return (
    <HStack gap="10" width="full">
      <Field.Root required>
        <Field.Label>Comment</Field.Label>
        <Textarea placeholder="Start typing..." variant="subtle" />
        <Field.HelperText>Max 500 characters.</Field.HelperText>
      </Field.Root>
      <Field.Root required>
        <Field.Label>Comment</Field.Label>
        <Textarea placeholder="Start typing..." variant="outline" />
        <Field.HelperText>Max 500 characters.</Field.HelperText>
      </Field.Root>
    </HStack>
  )
}

'use client'

import { HStack } from '@chakra-ui/react'
import { Field, Textarea } from '@saas-ui/react'

export const TextareaWithErrorText = () => {
  return (
    <HStack gap="10" width="full">
      <Field.Root invalid required>
        <Field.Label>Comment</Field.Label>
        <Textarea placeholder="Start typing..." variant="subtle" />
        <Field.ErrorText>Field is required</Field.ErrorText>
      </Field.Root>
      <Field.Root invalid required>
        <Field.Label>Comment</Field.Label>
        <Textarea placeholder="Start typing..." variant="outline" />
        <Field.ErrorText>Field is required</Field.ErrorText>
      </Field.Root>
    </HStack>
  )
}

'use client'

import { HStack } from '@chakra-ui/react'
import { Field, Input } from '@saas-ui/react'

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

'use client'

import { Input, Stack } from '@chakra-ui/react'
import { Button, Field, Textarea } from '@saas-ui/react'
import { useForm } from 'react-hook-form'

interface FormValues {
  username: string
  bio: string
}

export const TextareaWithHookForm = () => {
  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.Root required>
          <Field.Label>Username</Field.Label>
          <Input
            placeholder="@username"
            {...register('username', { required: 'Username is required' })}
          />
          <Field.ErrorText>{errors.username?.message}</Field.ErrorText>
          <Field.HelperText>This is your public display name.</Field.HelperText>
        </Field.Root>
        <Field.Root required>
          <Field.Label>Profile bio</Field.Label>
          <Textarea
            placeholder="I am ..."
            {...register('bio', { required: 'Bio is required' })}
          />
          <Field.ErrorText>{errors.bio?.message}</Field.ErrorText>
          <Field.HelperText>A short description of yourself</Field.HelperText>
        </Field.Root>
        <Button type="submit">Submit</Button>
      </Stack>
    </form>
  )
}

import { Stack } from '@chakra-ui/react'
import { Textarea } from '@saas-ui/react'

export const TextareaWithResize = () => {
  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 { Textarea } from '@saas-ui/react'

export const TextareaWithAutoresize = () => {
  return <Textarea autoresize />
}