// Forms

Textarea

Form textarea or textarea-styled component.

// Rendering preview…

// Install

npx shadcn@latest add @dakik/textarea

// Usage

1import { Textarea } from "@/components/ui/textarea";
2
3<Textarea />

// Code

1"use client";
2
3import { Field as ArkField } from "@ark-ui/react/field";
4import type React from "react";
5import { cn } from "@/lib/utils";
6
7export const Textarea = (
8  props: React.ComponentProps<typeof ArkField.Textarea>
9) => {
10  const { className, ...rest } = props;
11
12  return (
13    <ArkField.Textarea
14      className={cn(
15        "field-sizing-content min-h-16 w-full",
16        "flex",
17        "px-3 py-2",
18        "bg-transparent dark:bg-input/30",
19        "text-base md:text-sm",
20        "rounded-lg border border-input shadow-xs/5",
21        "placeholder:text-muted-foreground/64",
22        "transition-[color,box-shadow]",
23        "outline-none focus-visible:border-primary focus-visible:ring-[3px] focus-visible:ring-ring/32",
24        "aria-invalid:border-destructive aria-invalid:text-destructive aria-invalid:ring-[3px] aria-invalid:ring-destructive/24",
25        "data-invalid:border-destructive data-invalid:text-destructive data-invalid:ring-[3px] data-invalid:ring-destructive/24",
26        "dark:aria-invalid:border-destructive-foreground dark:aria-invalid:text-destructive-foreground dark:aria-invalid:ring-destructive-foreground/40",
27        "dark:data-invalid:border-destructive-foreground dark:data-invalid:text-destructive-foreground dark:data-invalid:ring-destructive-foreground/40",
28        "disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-64",

// Dependencies

@ark-ui/react