Checkbox

<Checkbox Id="checked-a" DefaultChecked="true" />

<div class="flex items-center gap-3 text-destructive" data-invalid="true">
    <Checkbox Id="invalid-a" aria-invalid="true" />
    <Label For="invalid-a">Accept terms and conditions</Label>
</div>

<div class="flex items-center gap-3">
    <Checkbox Id="basic-a" />
    <Label For="basic-a">Accept terms and conditions</Label>
</div>

<div class="flex items-start gap-3">
    <Checkbox Id="desc-a" DefaultChecked="true" />
    <div class="grid gap-2">
        <Label For="desc-a">Accept terms and conditions</Label>
        <p class="text-muted-foreground text-sm">By clicking this checkbox, you agree to the terms and conditions.</p>
    </div>
</div>

<div class="flex items-center gap-3" data-disabled="true">
    <Checkbox Id="disabled-a" Disabled="true" />
    <Label For="disabled-a">Accept terms and conditions</Label>
</div>

<div class="grid gap-3">
    <p class="text-sm font-medium">Show these items on the desktop:</p>
    <div class="flex items-center gap-3">
        <Checkbox Id="group-hard" DefaultChecked="true" />
        <Label For="group-hard" Class="font-normal">Hard disks</Label>
    </div>
    <div class="flex items-center gap-3">
        <Checkbox Id="group-external" DefaultChecked="true" />
        <Label For="group-external" Class="font-normal">External disks</Label>
    </div>
    <div class="flex items-center gap-3">
        <Checkbox Id="group-cds" />
        <Label For="group-cds" Class="font-normal">CDs, DVDs, and iPods</Label>
    </div>
    <div class="flex items-center gap-3">
        <Checkbox Id="group-servers" />
        <Label For="group-servers" Class="font-normal">Connected servers</Label>
    </div>
</div>