TextArea

A flexible input component that supports all native HTML input attributes, offering a consistent style for text fields, file inputs, and fully customizable form blocks.

pnpm dlx hybrid-astro-ui@latest add textarea

npx hybrid-astro-ui@latest add textarea

yarn dlx hybrid-astro-ui@latest add textarea

bunx hybrid-astro-ui@latest add textarea

Usage

---
import { TextArea } from "@/src/components/hybrid-astro-ui/textarea"
---
<form class="w-full max-w-75 flex flex-col gap-5">
    <TextArea required placeholder="Tell us what issue you're experiencing..." />
</form>

TextArea + Input + Button + Card

---
import { Input } from "@/src/components/hybrid-astro-ui/input"
import { Button } from "@/src/components/hybrid-astro-ui/button"
import { 
    Card, 
    CardHeader, 
    CardDescription, 
    CardTitle, 
    CardContent 
} from "@/src/components/hybrid-astro-ui/card"
import { TextArea } from "@/src/components/hybrid-astro-ui/textarea"
---
<Card class="w-full max-w-90">
    <CardHeader>
      <CardTitle>Report an Issue</CardTitle>
        <CardDescription>
            Fill out the form below to submit a new issue. 
            Please include as much detail as possible.
      </CardDescription>
    </CardHeader>

    <CardContent>
      <form class="flex flex-col gap-5">
        <Input required  placeholder="Issue title" aria-label="Issue title"/>
        <Input required placeholder="Issue ID" aria-label="Issue ID"/>
        <TextArea 
            required placeholder="Tell us what issue you're experiencing..." 
            aria-label="Issue description"
        />
        <Button aria-label="Submit issue form" class="w-full mt-2">
          Submit Issue
        </Button>
      </form>
    </CardContent>
</Card>