The Checkbox component is a customizable checkbox built with React and Tailwind CSS, utilizingclass-variance-authority for styling variants. It provides different styles (variant) and sizes (size) to fit various UI needs. The component leverages the peer utility in Tailwind CSS to enhance styling co
import { Checkbox } from "mogora-ui";
export default function ChecboxDemo() {
return (
<div>
<Checkbox variant={"primary"} name="check" />
</div>
)
}
A styled checkbox component supporting variants and sizes.
| Prop | Type | Description |
|---|---|---|
| name | string | The unique name/id for the checkbox input. |
| variant | "accent" | "danger" | "info" | "primary" | "success" | "warning" | Sets the visual style of the checkbox. Default is default. |
| size | "sm" | "md" | "lg" | Defines the checkbox size. Default is md. |
| className | string | Additional styling classes. |
The Checkbox component provides an accessible and flexible way to include styled checkboxes in your React application.