Radio

<div className="flex items-center space-x-2"><input type="radio" id="radio-0" name="radio-group" className="peer aspect-square h-4 w-4 rounded-full border ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 border-primary text-primary" checked /><label htmlFor="radio-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="radio" id="radio-1" name="radio-group" className="peer aspect-square h-4 w-4 rounded-full border ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 border-muted-foreground text-muted-foreground" checked /><label htmlFor="radio-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="radio" id="radio-2" name="radio-group" className="peer aspect-square h-4 w-4 rounded-full border ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 border-red-500 text-red-500" checked /><label htmlFor="radio-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="radio" id="radio-3" name="radio-group" className="peer aspect-square h-4 w-4 rounded-full border ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 border-green-500 text-green-500" checked /><label htmlFor="radio-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="radio" id="radio-4" name="radio-group" className="peer aspect-square h-4 w-4 rounded-full border ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 border-yellow-500 text-yellow-500" checked /><label htmlFor="radio-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="radio" id="radio-5" name="radio-group" className="peer aspect-square h-4 w-4 rounded-full border ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 border-blue-500 text-blue-500" checked /><label htmlFor="radio-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="radio" id="radio-6" name="radio-group" className="peer aspect-square h-4 w-4 rounded-full border ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 border-purple-500 text-purple-500" checked /><label htmlFor="radio-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="radio" id="radio-7" name="radio-group" className="peer aspect-square h-4 w-4 rounded-full border ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 border-orange-500 text-orange-500" checked /><label htmlFor="radio-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="radio" id="radio-8" name="radio-group" className="peer aspect-square h-4 w-4 rounded-full border ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 border-pink-500 text-pink-500" checked /><label htmlFor="radio-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="radio" id="radio-9" name="radio-group" className="peer aspect-square h-4 w-4 rounded-full border ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 border-teal-500 text-teal-500" checked /><label htmlFor="radio-9" className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">Teal Option</label></div>