Textarea

Displays a form textarea or a component that looks like a textarea.

Preview

Code

import Textarea from '@dinui/react/textarea'

export default function TextareaDemo() {
  return <Textarea placeholder="Type your message here." />
}

Disabled

Preview

Code

import Textarea from '@dinui/react/textarea'

export default function TextareaDisabledDemo() {
  return <Textarea placeholder="Type your message here." disabled />
}

With Label

Preview

Your message

Code

import Label from '@dinui/react/label'
import Textarea from '@dinui/react/textarea'

export default function TextareaWithLabelDemo() {
  return (
    <div className="grid w-full gap-1.5">
      <Label htmlFor="message">Your message</Label>
      <Textarea placeholder="Type your message here." id="message" />
    </div>
  )
}

With Text

Preview

Your Message

Your message will be copied to the support team.

Code

import Label from '@dinui/react/label'
import Textarea from '@dinui/react/textarea'

export default function TextareaWithTextDemo() {
  return (
    <div className="grid w-full gap-1.5">
      <Label htmlFor="message-2">Your Message</Label>
      <Textarea placeholder="Type your message here." id="message-2" />
      <p className="text-sm text-fg-weaker">Your message will be copied to the support team.</p>
    </div>
  )
}

With Button

Preview

Send message

Code

import Button from '@dinui/react/button'
import Textarea from '@dinui/react/textarea'

export default function TextareaWithButtonDemo() {
  return (
    <div className="grid w-full gap-2">
      <Textarea placeholder="Type your message here." />
      <Button>Send message</Button>
    </div>
  )
}

Form

Preview

Bio

You can @mention other users and organizations.

Submit

Code

'use client'

import Button from '@dinui/react/button'
import Form, { useForm } from '@dinui/react/form'
import Textarea from '@dinui/react/textarea'
import { zodResolver } from '@hookform/resolvers/zod'
import { z } from 'zod'

const FormSchema = z.object({
  bio: z
    .string()
    .min(10, {
      message: 'Bio must be at least 10 characters.',
    })
    .max(160, {
      message: 'Bio must not be longer than 30 characters.',
    }),
})

export default function TextareaForm() {
  const form = useForm<z.infer<typeof FormSchema>>({
    resolver: zodResolver(FormSchema),
  })

  function onSubmit(data: z.infer<typeof FormSchema>) {
    alert(`You submitted the following values: ${JSON.stringify(data, null, 2)}`)
  }

  return (
    <Form form={form} onSubmit={form.handleSubmit(onSubmit)} className="w-2/3 space-y-6">
      <Form.Field
        control={form.control}
        name="bio"
        render={({ field }) => (
          <Form.Item>
            <Form.Label>Bio</Form.Label>
            <Form.Control>
              <Textarea
                placeholder="Tell us a little bit about yourself"
                className="resize-none"
                {...field}
              />
            </Form.Control>
            <Form.Description>
              You can <span>@mention</span> other users and organizations.
            </Form.Description>
            <Form.ErrorMessage />
          </Form.Item>
        )}
      />

      <Button type="submit">Submit</Button>
    </Form>
  )
}

Installation

Default

1. Follow Installation Guide

   To enable DinUI functionality in your project, you will need to properly set up Tailwind and install the necessary dependencies.

2. All done

   You now can start using this component in your project.

CLI

1. Follow Installation Guide

   To enable DinUI functionality in your project, you will need to properly set up Tailwind and install the necessary dependencies.

2. Run the following command in your project

   npm

   npx @dinui/cli@latest add textarea

   yarn

   yarn dlx @dinui/cli@latest add textarea

   pnpm

   pnpm dlx @dinui/cli@latest add textarea

   bun

   bunx @dinui/cli@latest add textarea

3. Update the import paths to match your project setup

4. All done

   You now can start using this component in your project.

Manual

1. Follow Installation Guide

   To enable DinUI functionality in your project, you will need to properly set up Tailwind and install the necessary dependencies.

2. Install dependencies

   npm

   npm install tailwind-variants

   yarn

   yarn add tailwind-variants

   pnpm

   pnpm add tailwind-variants

   bun

   bun add tailwind-variants

3. Copy and paste the following code into your project

   import { forwardRef } from 'react'
   import { tv } from 'tailwind-variants'
   
   const textarea = tv({
     slots: {
       root: [
         'flex min-h-[60px] w-full rounded-md border bg-transparent px-3 py-2',
         'text-sm shadow-sm placeholder:text-fg-weaker',
         'disabled:cursor-not-allowed disabled:opacity-50',
       ],
     },
   })
   
   const Textarea = forwardRef<HTMLTextAreaElement, React.ComponentPropsWithoutRef<'textarea'>>(
     (props, ref) => {
       const { root } = textarea()
   
       return <textarea {...props} ref={ref} className={root({ className: props.className })} />
     },
   )
   Textarea.displayName = 'Textarea'
   
   export default Textarea
   export { textarea }

4. Update the import paths to match your project setup

5. All done

   You now can start using this component in your project.