Label

A simple and accessible label component that pairs seamlessly with form inputs, providing clear semantics, consistent styling, and support for disabled states.

Install

pnpm dlx hybrid-astro-ui@latest label

npx hybrid-astro-ui@latest add label

yarn dlx hybrid-astro-ui@latest add label

bunx hybrid-astro-ui@latest add label

---
import { Label } from "@/src/components/hybrid-astro-ui/label"
import { Input } from "@/src/components/hybrid-astro-ui/input"
---
<form class="w-[90%] md:w-70">
    <div class="flex flex-col gap-2">
        <Label for="username">Username</Label>
        <Input disabled id="username" />

        <Label for="email">Email</Label>
        <Input  id="email"/>
    </div>
</form>