Textarea

A taller input.

import { Textarea } from '@/components/textarea';

export default function TextareaPreview() {
  return (
    <Textarea
      className="w-80"
      rows={5}
      placeholder="Write your next novel here"
    />
  );
}

Dependencies

inputStyle

Source Code

import type { VariantProps } from 'cva';

import { inputStyle } from '@/components/input';
import { cn } from '@/lib/utils/classnames';

interface TextareaProps extends React.ComponentPropsWithRef<'textarea'> {
  invalid?: boolean;
  variant?: VariantProps<typeof inputStyle>['variant'];
}

const Textarea = ({ className, invalid, variant, ...props }: TextareaProps) => {
  return (
    <textarea
      data-invalid={invalid}
      aria-invalid={invalid}
      className={cn(
        inputStyle({ variant }),
        'h-auto resize-none py-2 leading-snug',
        className
      )}
      {...props}
    />
  );
};

export { Textarea };

API Reference

Extends the textarea element.

Prop	Default	Type
`variant`	`"default"`	`"default""minimal"`
`invalid`	-	`boolean`

Examples

Default

import { Textarea } from '@/components/textarea';

export default function TextareaPreview() {
  return (
    <Textarea
      className="w-80"
      rows={5}
      placeholder="Write your next novel here"
    />
  );
}

Minimal

import { Textarea } from '@/components/textarea';

export default function TextareaMinimalPreview() {
  return (
    <Textarea
      className="w-80"
      variant="minimal"
      rows={5}
      placeholder="Write your next novel here"
    />
  );
}

Disabled

import { Textarea } from '@/components/textarea';

export default function TextareaDisabledPreview() {
  return (
    <Textarea
      className="w-80"
      rows={5}
      disabled
      value="Once upon a time, in a distant galaxy, there lived a lonely star. Each day it would shine brightly, hoping to catch the attention of passing comets. One day, a beautiful comet noticed its radiant glow and decided to orbit nearby. From that day forward, the star was never lonely again."
    />
  );
}

Auto-resize

Add the field-sizing-content class to grow the textarea to fit its content. Pair it with a max-h-* (and overflow-auto) class to cap the growth. Browsers without support fall back to a fixed-height textarea.

import { Textarea } from '@/components/textarea';

export default function TextareaResizePreview() {
  return (
    <Textarea
      className="field-sizing-content max-h-48 w-80 overflow-auto"
      placeholder="Write your next novel here"
    />
  );
}

Best Practices

Sizing:
- Consider initial height based on expected content
- Allow resizing when appropriate
- Maintain consistent width with other inputs
Accessibility:
- Provide clear labels
- Consider character/word count indicators

Tabs

Toaster