Checkbox

A flexible and accessible checkbox component that supports custom styles, seamless labeling, disabled states, and smooth integration within form interfaces. Designed to deliver consistent behavior, intuitive interaction, and compatibility with external labels, it adapts effortlessly to a wide range of UI layouts and use cases.

Install

pnpm dlx hybrid-astro-ui@latest add checkbox

npx hybrid-astro-ui@latest add checkbox

yarn dlx hybrid-astro-ui@latest add checkbox

bunx hybrid-astro-ui@latest add checkbox

Usage

---
import { Checkbox } from "@/src/components/hybrid-astro-ui/checkbox"
import { Label } from "@/src/components/hybrid-astro-ui/label"
---
<div class="flex items-center gap-1 justify-center">
    <Checkbox id="terms"/>
    <Label for="terms">
        Accept terms and conditions
    </Label >
</div>

Disabled

---
import { Checkbox } from "@/src/components/hybrid-astro-ui/checkbox"
import { Label } from "@/src/components/hybrid-astro-ui/label"
---
<div class="flex items-center gap-1 justify-center">
    <Checkbox id="terms" disabled/>
    <Label for="terms" disabled>
        Accept terms and conditions
    </Label >
</div>