Checkbox

<div className="flex items-center space-x-2">
  <Checkbox id="terms" />
  <Label htmlFor="terms">
    Accept terms and conditions
  </Label>
</div>

import { Checkbox } from "@mijn-ui/react-checkbox"
import { Label } from "@mijn-ui/react-label"
 
const CheckboxColors = () => {
  return (
    <div className="flex flex-col gap-4">
      <div className="flex items-center gap-2">
        <Checkbox defaultChecked id="primary" color="primary" />
        <Label htmlFor="primary">Primary</Label>
      </div>
 
      <div className="flex items-center gap-2">
        <Checkbox defaultChecked id="secondary" color="secondary" />
        <Label htmlFor="secondary">Secondary</Label>
      </div>
 
      <div className="flex items-center gap-2">
        <Checkbox defaultChecked id="accent" color="accent" />
        <Label htmlFor="accent">Accent</Label>
      </div>
 
      <div className="flex items-center gap-2">
        <Checkbox defaultChecked id="muted" color="muted" />
        <Label htmlFor="muted">Muted</Label>
      </div>
 
      <div className="flex items-center gap-2">
        <Checkbox defaultChecked id="danger" color="danger" />
        <Label htmlFor="danger">Danger</Label>
      </div>
 
      <div className="flex items-center gap-2">
        <Checkbox defaultChecked id="success" color="success" />
        <Label htmlFor="success">Success</Label>
      </div>
    </div>
  )
}
 
export default CheckboxColors

import { Checkbox } from "@mijn-ui/react-checkbox"
import { Label } from "@mijn-ui/react-label"
 
const CheckboxSizes = () => {
  return (
    <div className="flex flex-col gap-4">
      <div className="flex items-center gap-2">
        <Checkbox defaultChecked id="sm" size="sm" />
        <Label htmlFor="sm">Small</Label>
      </div>
 
      <div className="flex items-center gap-2">
        <Checkbox defaultChecked id="md" size="md" />
        <Label htmlFor="md">Medium/Default</Label>
      </div>
 
      <div className="flex items-center gap-2">
        <Checkbox defaultChecked id="lg" size="lg" />
        <Label htmlFor="lg">Large</Label>
      </div>
    </div>
  )
}
 
export default CheckboxSizes