import { Textarea } from "@/components/ui/textarea"
import { Field } from "@/components/field"

<Field label="Descrição" htmlFor="desc" required>
  <Textarea
    id="desc"
    placeholder="Descreva o problema..."
    rows={4}
  />
</Field>

"use client"
import { useState } from "react"

export function TextareaDemo() {
  const [value, setValue] = useState("")

  return (
    <div className="flex flex-col gap-1">
      <Textarea
        value={value}
        onChange={(e) => setValue(e.target.value)}
        placeholder="Escreva aqui..."
        maxLength={500}
      />
      <span className="text-xs text-muted-foreground text-right">
        {value.length}/500
      </span>
    </div>
  )
}