Textarea

Preview

Source

---
import Textarea from '@bejamas/ui/components/Textarea.astro';
---

<Textarea placeholder="Type your message here..." />

Installation

CLI

bun

 bunx bejamas add textarea

npm

 npx bejamas add textarea

pnpm

 pnpm dlx bejamas add textarea

yarn

 yarn dlx bejamas add textarea

Manual

---
/**
 * @component Textarea
 * @title Textarea
 * @description A multi-line input field for longer user content.
 * @status stable
 * @since 0.1.0
 *
 * @preview
 *
 * <Textarea placeholder="Type your message here..." />
 *
 */

const { class: className = "", ...props } = Astro.props;

const baseClass =
  "border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm";

import { cn } from "@bejamas/ui/lib/utils";
---

<textarea
  data-slot={props["data-slot"] ?? "textarea"}
  class={cn(baseClass, className)}
  {...props}></textarea>