Textarea

Styled textarea

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

...

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

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

Installation

npx @fictjs/shadcn@latest add textarea

Copy the Fict shadcn component into your project.

Source

components/ui/textarea.tsx

src/components/ui/textarea.tsx

import { cn } from '@/lib/cn'

type TextareaProps = JSX.IntrinsicElements['textarea']

export function Textarea(props: TextareaProps) {
  const { class: className, ...rest } = props
  return (
    <textarea
      class={cn(
        'min-h-20 flex w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50',
        className,
      )}
      {...rest}
    />
  )
}

Usage

Examples

Field

Message

Enter your message below.

import { Textarea } from '@/components/ui/textarea'
import { Label } from '@/components/ui/label'
...

import { Textarea } from '@/components/ui/textarea'
import { Label } from '@/components/ui/label'

export default function TextareaFieldExample() {
  return (
    <div class="grid gap-2"><Label for="message">Message</Label><p class="text-sm text-muted-foreground">Enter your message below.</p><Textarea id="message" placeholder="Type your message here." rows={4} /></div>
  )
}

Disabled

Message

import { Textarea } from '@/components/ui/textarea'
import { Label } from '@/components/ui/label'
...

import { Textarea } from '@/components/ui/textarea'
import { Label } from '@/components/ui/label'

export default function TextareaDisabledExample() {
  return (
    <div class="grid gap-2"><Label for="message-disabled">Message</Label><Textarea id="message-disabled" disabled placeholder="Type your message here." rows={4} /></div>
  )
}

Invalid

Message

Please enter a valid message.

import { Textarea } from '@/components/ui/textarea'
import { Label } from '@/components/ui/label'
...

import { Textarea } from '@/components/ui/textarea'
import { Label } from '@/components/ui/label'

export default function TextareaInvalidExample() {
  return (
    <div class="grid gap-2"><Label for="message-invalid">Message</Label><Textarea id="message-invalid" aria-invalid="true" placeholder="Type your message here." rows={4} /><p class="text-sm text-destructive">Please enter a valid message.</p></div>
  )
}

Button

import { Button } from '@/components/ui/button'
import { Textarea } from '@/components/ui/textarea'
...

import { Button } from '@/components/ui/button'
import { Textarea } from '@/components/ui/textarea'

export default function TextareaButtonExample() {
  return (
    <div class="grid gap-2"><Textarea placeholder="Type your message here." rows={4} /><Button>Send message</Button></div>
  )
}

Rtl

التعليقات

شاركنا أفكارك حول خدمتنا.

import { Label } from '@/components/ui/label'
import { Textarea } from '@/components/ui/textarea'
...

import { Label } from '@/components/ui/label'
import { Textarea } from '@/components/ui/textarea'

const translations = {
  ar: { dir: 'rtl', label: 'التعليقات', description: 'شاركنا أفكارك حول خدمتنا.', placeholder: 'تعليقاتك تساعدنا على التحسين...' },
  he: { dir: 'rtl', label: 'משוב', description: 'שתף את מחשבותיך על השירות שלנו.', placeholder: 'המשוב שלך עוזר לנו להשתפר...' },
  en: { dir: 'ltr', label: 'Feedback', description: 'Share your thoughts about our service.', placeholder: 'Your feedback helps us improve...' },
} as const

export default function TextareaRtlExample() {
  let language = $state<keyof typeof translations>('ar')
  const text = () => translations[language]

  return (
    <div class="grid gap-2" dir={text().dir}><select value={language} onChange={event => { language = event.currentTarget.value as keyof typeof translations }}><option value="ar">Arabic (العربية)</option><option value="he">Hebrew (עברית)</option><option value="en">English</option></select><Label for="feedback">{text().label}</Label><p class="text-sm text-muted-foreground">{text().description}</p><Textarea id="feedback" dir={text().dir} placeholder={text().placeholder} rows={4} /></div>
  )
}

Tabs Toast