Checkbox

<div className="flex items-center space-x-2"><input type="checkbox" id="check-0" className="peer h-4 w-4 shrink-0 rounded-sm border ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 checked:text-white border-primary checked:bg-primary checked:border-primary" checked /><label htmlFor="check-0" className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">Primary Option</label></div>

<div className="flex items-center space-x-2"><input type="checkbox" id="check-1" className="peer h-4 w-4 shrink-0 rounded-sm border ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 checked:text-white border-muted-foreground checked:bg-muted-foreground checked:border-muted-foreground" checked /><label htmlFor="check-1" className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">Secondary Option</label></div>

<div className="flex items-center space-x-2"><input type="checkbox" id="check-2" className="peer h-4 w-4 shrink-0 rounded-sm border ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 checked:text-white border-red-500 checked:bg-red-500 checked:border-red-500" checked /><label htmlFor="check-2" className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">Destructive Option</label></div>

<div className="flex items-center space-x-2"><input type="checkbox" id="check-3" className="peer h-4 w-4 shrink-0 rounded-sm border ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 checked:text-white border-green-500 checked:bg-green-500 checked:border-green-500" checked /><label htmlFor="check-3" className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">Success Option</label></div>

<div className="flex items-center space-x-2"><input type="checkbox" id="check-4" className="peer h-4 w-4 shrink-0 rounded-sm border ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 checked:text-white border-yellow-500 checked:bg-yellow-500 checked:border-yellow-500" checked /><label htmlFor="check-4" className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">Warning Option</label></div>

<div className="flex items-center space-x-2"><input type="checkbox" id="check-5" className="peer h-4 w-4 shrink-0 rounded-sm border ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 checked:text-white border-blue-500 checked:bg-blue-500 checked:border-blue-500" checked /><label htmlFor="check-5" className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">Info Option</label></div>

<div className="flex items-center space-x-2"><input type="checkbox" id="check-6" className="peer h-4 w-4 shrink-0 rounded-sm border ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 checked:text-white border-purple-500 checked:bg-purple-500 checked:border-purple-500" checked /><label htmlFor="check-6" className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">Purple Option</label></div>

<div className="flex items-center space-x-2"><input type="checkbox" id="check-7" className="peer h-4 w-4 shrink-0 rounded-sm border ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 checked:text-white border-orange-500 checked:bg-orange-500 checked:border-orange-500" checked /><label htmlFor="check-7" className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">Orange Option</label></div>

<div className="flex items-center space-x-2"><input type="checkbox" id="check-8" className="peer h-4 w-4 shrink-0 rounded-sm border ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 checked:text-white border-pink-500 checked:bg-pink-500 checked:border-pink-500" checked /><label htmlFor="check-8" className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">Pink Option</label></div>

<div className="flex items-center space-x-2"><input type="checkbox" id="check-9" className="peer h-4 w-4 shrink-0 rounded-sm border ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 checked:text-white border-teal-500 checked:bg-teal-500 checked:border-teal-500" checked /><label htmlFor="check-9" className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">Teal Option</label></div>