Reddot UI Library

Docs
Textarea

Textarea

Displays a form textarea or a component that looks like a textarea.

Installation

$npx shadcn@latest add https://reddot.dottools.xyz/r/textarea.json

Utilisation

import { Textarea } from "@/components/ui/textarea"
 
export function TextareaDemo() {
  return <Textarea placeholder="Type your message here." />
}

Désactivé

import { Textarea } from "@/components/ui/textarea"
 
export function TextareaDisabled() {
  return <Textarea placeholder="Type your message here." disabled />
}

Avec label

import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
 
export function TextareaWithLabel() {
  return (
    <div className="grid w-full gap-1.5">
      <Label htmlFor="message">Your message</Label>
      <Textarea placeholder="Type your message here." id="message" />
    </div>
  )
}

Avec texte d'aide

import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
 
export function TextareaWithText() {
  return (
    <div className="grid w-full gap-1.5">
      <Label htmlFor="message-2">Your Message</Label>
      <Textarea placeholder="Type your message here." id="message-2" />
      <p className="text-sm text-muted-foreground">
        Your message will be copied to the support team.
      </p>
    </div>
  )
}

Avec bouton

import { Button } from "@/components/ui/button"
import { Textarea } from "@/components/ui/textarea"
 
export function TextareaWithButton() {
  return (
    <div className="grid w-full gap-2">
      <Textarea placeholder="Type your message here." />
      <Button>Send message</Button>
    </div>
  )
}

API Reference

Textarea

Extend les propriétés standard de l'élément HTML <textarea>.

PropTypeDefaultDescription
placeholderstring-Placeholder text
disabledbooleanfalseWhen true, prevents the user from interacting with the textarea
rowsnumber-The number of visible text lines
colsnumber-The visible width of the text control

Notes

  • Ce composant UI fait partie du système de design
  • Respecte les conventions de style et d'accessibilité
  • Supporte toutes les propriétés HTML standard du textarea
  • Compatible avec les librairies de formulaire
  • Redimensionnable par défaut (peut être désactivé avec CSS)