Text Area

Allows users to input long text data into a form.

 
import Textarea from "@tailus-ui/Textarea";

const Overview = () => (
    <div className="max-w-xs space-y-6">
        <Textarea variant="plain" placeholder="Enter your message" />
        <Textarea rows={3} variant="soft" placeholder="Enter your message"/>
        <Textarea rows={3} variant="outlined" placeholder="Enter your message"/>
        <Textarea rows={3} variant="mixed" placeholder="Enter your message"/>
        <Textarea rows={3} variant="bottomOutlined" placeholder="Enter your message"/>
    </div>
)

Installation

Copy-Paste the component code in a .tsx file.

import React from 'react';
import { twMerge } from 'tailwind-merge';
import {
    form,
    type InputProps,
} from "@tailus/themer"

export interface TextAreaProps
  extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'size'>, InputProps {}

  export const Textarea = React.forwardRef<HTMLTextAreaElement, TextAreaProps>(({ className, variant="mixed", fancy=false, size="md", ...props }, forwardedRef) => {
    
    const { input, textarea } = form();

    if ((variant === "bottomOutlined" || variant === "plain") && fancy) {
      throw Error("Fancy is not supported with the bottomOutlined or plain variant !");
    }
    
    return (
        <textarea
          ref={forwardedRef as React.RefObject<HTMLTextAreaElement>}
          className={input({ variant, fancy, size, class:twMerge(textarea(), className)})}
          {...props}
        />
    )
  });

export default Textarea;

Usage

Import the Textarea component and build your form.

import Textarea from "@tailus-ui/Textarea";

const Overview = () => (
    <div className="max-w-xs space-y-6">
        <Textarea variant="plain" placeholder="Enter your message" />
        <Textarea rows={3} variant="soft" placeholder="Enter your message"/>
        <Textarea rows={3} variant="outlined" placeholder="Enter your message"/>
        <Textarea rows={3} variant="mixed" placeholder="Enter your message"/>
        <Textarea rows={3} variant="bottomOutlined" placeholder="Enter your message"/>
    </div>
)

Reference

Input

The input field component

Prop
Type
Default
variant
enum
mixed
size
enum
md
fancy
boolean
false

Examples

With Label

 
import Label from "@tailus-ui/Label";
import Textarea from "@tailus-ui/Textarea";

const WithLabel = () => (
    <div className="space-y-2">
        <Label htmlFor="message">Message</Label>
        <Textarea id="message" rows={3} />
    </div>
)

With Caption

Enter your name

 
import Label from "@tailus-ui/Label";
import Textarea from "@tailus-ui/Textarea";
import { Caption } from "@tailus-ui/typography";

const WithLabel = () => (
    <div className="space-y-2">
        <Label htmlFor="message">Message</Label>
        <Textarea id="message" rows={3} />
        <Caption>Enter your message</Caption>
    </div>
)

Disabled

Enter your name

 
import Label from "@tailus-ui/Label";
import Textarea from "@tailus-ui/Textarea";
import { Caption } from "@tailus-ui/typography";

const WithLabel = () => (
    <div className="space-y-2 *:has-[:disabled]:opacity-50 *:has-[:disabled]:pointer-events-none">
        <Label htmlFor="message">Message</Label>
        <Textarea disabled id="message" rows={3} />
        <Caption>Enter your message</Caption>
    </div>
)