Checkbox

1import { Checkbox } from "@glinui/ui"
2
3export function CheckboxBasicDemo() {
4return (
5  <div className="flex items-center gap-2">
6    <Checkbox id="basic" />
7    <label htmlFor="basic" className="text-sm">Accept terms and conditions</label>
8  </div>
9)
10}

1import { Checkbox } from "@glinui/ui"
2
3export function CheckboxDefaultCheckedDemo() {
4return (
5  <div className="flex items-center gap-2">
6    <Checkbox id="checked" defaultChecked />
7    <label htmlFor="checked" className="text-sm">Subscribed to newsletter</label>
8  </div>
9)
10}

1import { Checkbox } from "@glinui/ui"
2
3export function CheckboxVariantsDemo() {
4return (
5  <div className="flex flex-wrap items-center gap-3">
6    <Checkbox variant="default" defaultChecked aria-label="Default" />
7    <Checkbox variant="glass" defaultChecked aria-label="Glass" />
8    <Checkbox variant="liquid" defaultChecked aria-label="Liquid" />
9    <Checkbox variant="matte" defaultChecked aria-label="Matte" />
10    <Checkbox variant="outline" defaultChecked aria-label="Outline" />
11  </div>
12)
13}

1import { Checkbox } from "@glinui/ui"
2
3export function CheckboxSizesDemo() {
4return (
5  <div className="flex flex-wrap items-center gap-4">
6    <Checkbox size="sm" defaultChecked aria-label="Small checkbox" />
7    <Checkbox size="md" defaultChecked aria-label="Medium checkbox" />
8    <Checkbox size="lg" defaultChecked aria-label="Large checkbox" />
9  </div>
10)
11}

1import { Checkbox } from "@glinui/ui"
2
3export function CheckboxDisabledDemo() {
4return (
5  <div className="space-y-2">
6    <div className="flex items-center gap-2">
7      <Checkbox id="dis-unchecked" disabled />
8      <label htmlFor="dis-unchecked" className="text-sm">Disabled unchecked</label>
9    </div>
10    <div className="flex items-center gap-2">
11      <Checkbox id="dis-checked" disabled defaultChecked />
12      <label htmlFor="dis-checked" className="text-sm">Disabled checked</label>
13    </div>
14  </div>
15)
16}

1import { Checkbox } from "@glinui/ui"
2
3export function CheckboxFormLabelDemo() {
4return (
5  <div className="space-y-2">
6    <div className="flex items-center gap-2">
7      <Checkbox id="terms" required name="terms" />
8      <label htmlFor="terms" className="text-sm">I agree to the terms of service</label>
9    </div>
10    <div className="flex items-center gap-2">
11      <Checkbox id="privacy" name="privacy" />
12      <label htmlFor="privacy" className="text-sm">I agree to the privacy policy</label>
13    </div>
14  </div>
15)
16}