Basic Radio
Radio are generally used in radio groups collections of radio buttons describing a set of related options. Check out code for detail of usage.
<label class="inline-flex items-center space-x-2">
<input
checked
class="form-radio is-basic h-5 w-5 rounded-full border-slate-400/70 checked:border-slate-500 checked:bg-slate-500 hover:border-slate-500 focus:border-slate-500 dark:border-navy-400 dark:checked:bg-navy-400"
name="basic"
type="radio"
/>
<p>Default</p>
</label>
<label class="inline-flex items-center space-x-2">
<input
class="form-radio is-basic h-5 w-5 rounded-full border-slate-400/70 checked:border-primary checked:bg-primary hover:border-primary focus:border-primary dark:border-navy-400 dark:checked:border-accent dark:checked:bg-accent dark:hover:border-accent dark:focus:border-accent"
name="basic"
type="radio"
/>
<p>Primary</p>
</label>
<label class="inline-flex items-center space-x-2">
<input
class="form-radio is-basic h-5 w-5 rounded-full border-slate-400/70 checked:border-secondary checked:bg-secondary hover:border-secondary focus:border-secondary dark:border-navy-400 dark:checked:border-secondary-light dark:checked:bg-secondary-light dark:hover:border-secondary-light dark:focus:border-secondary-light"
name="basic"
type="radio"
/>
<p>Secondary</p>
</label>
<label class="inline-flex items-center space-x-2">
<input
class="form-radio is-basic h-5 w-5 rounded-full border-slate-400/70 checked:!border-info checked:bg-info hover:!border-info focus:!border-info dark:border-navy-400"
name="basic"
type="radio"
/>
<p>Info</p>
</label>
<label class="inline-flex items-center space-x-2">
<input
class="form-radio is-basic h-5 w-5 rounded-full border-slate-400/70 checked:!border-success checked:bg-success hover:!border-success focus:!border-success dark:border-navy-400"
name="basic"
type="radio"
/>
<p>Success</p>
</label>
<label class="inline-flex items-center space-x-2">
<input
class="form-radio is-basic h-5 w-5 rounded-full border-slate-400/70 checked:!border-warning checked:bg-warning hover:!border-warning focus:!border-warning dark:border-navy-400"
name="basic"
type="radio"
/>
<p>Warning</p>
</label>
<label class="inline-flex items-center space-x-2">
<input
class="form-radio is-basic h-5 w-5 rounded-full border-slate-400/70 checked:!border-error checked:bg-error hover:!border-error focus:!border-error dark:border-navy-400"
name="basic"
type="radio"
/>
<p>Error</p>
</label>
Filled Radio
The radio component can be filled. Check out code for detail of usage.
<label class="inline-flex items-center space-x-2">
<input
checked
class="form-radio is-basic h-5 w-5 rounded-full border-slate-400/70 bg-slate-100 checked:border-slate-500 checked:bg-slate-500 hover:border-slate-500 focus:border-slate-500 dark:border-navy-500 dark:bg-navy-900 dark:checked:border-navy-400 dark:checked:bg-navy-400"
name="basic_filled"
type="radio"
/>
<p>Default</p>
</label>
<label class="inline-flex items-center space-x-2">
<input
class="form-radio is-basic h-5 w-5 rounded-full border-slate-400/70 bg-slate-100 checked:border-primary checked:bg-primary hover:border-primary focus:border-primary dark:border-navy-500 dark:bg-navy-900 dark:checked:border-accent dark:checked:bg-accent dark:hover:border-accent dark:focus:border-accent"
name="basic_filled"
type="radio"
/>
<p>Primary</p>
</label>
<label class="inline-flex items-center space-x-2">
<input
class="form-radio is-basic h-5 w-5 rounded-full border-slate-400/70 bg-slate-100 checked:border-secondary checked:bg-secondary hover:border-secondary focus:border-secondary dark:border-navy-500 dark:bg-navy-900 dark:checked:border-secondary-light dark:checked:bg-secondary-light dark:hover:border-secondary-light dark:focus:border-secondary-light"
name="basic_filled"
type="radio"
/>
<p>Secondary</p>
</label>
<label class="inline-flex items-center space-x-2">
<input
class="form-radio is-basic h-5 w-5 rounded-full border-slate-400/70 bg-slate-100 checked:!border-info checked:!bg-info hover:!border-info focus:!border-info dark:border-navy-500 dark:bg-navy-900"
name="basic_filled"
type="radio"
/>
<p>Info</p>
</label>
<label class="inline-flex items-center space-x-2">
<input
class="form-radio is-basic h-5 w-5 rounded-full border-slate-400/70 bg-slate-100 checked:!border-success checked:!bg-success hover:!border-success focus:!border-success dark:border-navy-500 dark:bg-navy-900"
name="basic_filled"
type="radio"
/>
<p>Success</p>
</label>
<label class="inline-flex items-center space-x-2">
<input
class="form-radio is-basic h-5 w-5 rounded-full border-slate-400/70 bg-slate-100 checked:!border-warning checked:!bg-warning hover:!border-warning focus:!border-warning dark:border-navy-500 dark:bg-navy-900"
name="basic_filled"
type="radio"
/>
<p>Warning</p>
</label>
<label class="inline-flex items-center space-x-2">
<input
class="form-radio is-basic h-5 w-5 rounded-full border-slate-400/70 bg-slate-100 checked:!border-error checked:!bg-error hover:!border-error focus:!border-error dark:border-navy-500 dark:bg-navy-900"
name="basic_filled"
type="radio"
/>
<p>Error</p>
</label>
Outline Radio
The radio component can be outtlined. Check out code for detail of usage.
<label class="inline-flex items-center space-x-2">
<input
checked
class="form-radio is-outline h-5 w-5 rounded-full border-slate-400/70 before:bg-slate-500 checked:border-slate-500 hover:border-slate-500 focus:border-slate-500 dark:border-navy-400 dark:before:bg-navy-200 dark:checked:border-navy-200 dark:hover:border-navy-200 dark:focus:border-navy-200"
name="outline"
type="radio"
/>
<p>Default</p>
</label>
<label class="inline-flex items-center space-x-2">
<input
class="form-radio is-outline h-5 w-5 rounded-full border-slate-400/70 before:bg-primary checked:border-primary hover:border-primary focus:border-primary dark:border-navy-400 dark:before:bg-accent dark:checked:border-accent dark:hover:border-accent dark:focus:border-accent"
name="outline"
type="radio"
/>
<p>Primary</p>
</label>
<label class="inline-flex items-center space-x-2">
<input
class="form-radio is-outline h-5 w-5 rounded-full border-slate-400/70 before:bg-secondary checked:border-secondary hover:border-secondary focus:border-secondary dark:border-navy-400 dark:before:bg-secondary-light dark:checked:border-secondary-light dark:hover:border-secondary-light dark:focus:border-secondary-light"
name="outline"
type="radio"
/>
<p>Secondary</p>
</label>
<label class="inline-flex items-center space-x-2">
<input
class="form-radio is-outline h-5 w-5 rounded-full border-slate-400/70 before:!bg-info checked:!border-info hover:!border-info focus:!border-info dark:border-navy-400"
name="outline"
type="radio"
/>
<p>Info</p>
</label>
<label class="inline-flex items-center space-x-2">
<input
class="form-radio is-outline h-5 w-5 rounded-full border-slate-400/70 before:!bg-success checked:!border-success hover:!border-success focus:!border-success dark:border-navy-400"
name="outline"
type="radio"
/>
<p>Success</p>
</label>
<label class="inline-flex items-center space-x-2">
<input
class="form-radio is-outline h-5 w-5 rounded-full border-slate-400/70 before:!bg-warning checked:!border-warning hover:!border-warning focus:!border-warning dark:border-navy-400"
name="outline"
type="radio"
/>
<p>Warning</p>
</label>
<label class="inline-flex items-center space-x-2">
<input
class="form-radio is-outline h-5 w-5 rounded-full border-slate-400/70 before:!bg-error checked:!border-error hover:!border-error focus:!border-error dark:border-navy-400"
name="outline"
type="radio"
/>
<p>Error</p>
</label>
Outline Filled
The radio component can be outlined and filled. Check out code for detail of usage.
<label class="inline-flex items-center space-x-2">
<input
checked
class="form-radio is-outline h-5 w-5 rounded-full border-slate-400/70 bg-slate-100 before:bg-slate-500 checked:border-slate-500 hover:border-slate-500 focus:border-slate-500 dark:border-navy-500 dark:bg-navy-900 dark:before:bg-navy-200 dark:checked:border-navy-200 dark:hover:border-navy-200 dark:focus:border-navy-200"
name="outline_filled"
type="radio"
/>
<p>Default</p>
</label>
<label class="inline-flex items-center space-x-2">
<input
class="form-radio is-outline h-5 w-5 rounded-full border-slate-400/70 bg-slate-100 before:bg-primary checked:border-primary hover:border-primary focus:border-primary dark:border-navy-500 dark:bg-navy-900 dark:before:bg-accent dark:checked:border-accent dark:hover:border-accent dark:focus:border-accent"
name="outline_filled"
type="radio"
/>
<p>Primary</p>
</label>
<label class="inline-flex items-center space-x-2">
<input
class="form-radio is-outline h-5 w-5 rounded-full border-slate-400/70 bg-slate-100 before:bg-secondary checked:border-secondary hover:border-secondary focus:border-secondary dark:border-navy-500 dark:bg-navy-900 dark:before:bg-secondary-light dark:checked:border-secondary-light dark:hover:border-secondary-light dark:focus:border-secondary-light"
name="outline_filled"
type="radio"
/>
<p>Secondary</p>
</label>
<label class="inline-flex items-center space-x-2">
<input
class="form-radio is-outline h-5 w-5 rounded-full border-slate-400/70 bg-slate-100 before:!bg-info checked:!border-info hover:!border-info focus:!border-info dark:border-navy-500 dark:bg-navy-900"
name="outline_filled"
type="radio"
/>
<p>Info</p>
</label>
<label class="inline-flex items-center space-x-2">
<input
class="form-radio is-outline h-5 w-5 rounded-full border-slate-400/70 bg-slate-100 before:!bg-success checked:!border-success hover:!border-success focus:!border-success dark:border-navy-500 dark:bg-navy-900"
name="outline_filled"
type="radio"
/>
<p>Success</p>
</label>
<label class="inline-flex items-center space-x-2">
<input
class="form-radio is-outline h-5 w-5 rounded-full border-slate-400/70 bg-slate-100 before:!bg-warning checked:!border-warning hover:!border-warning focus:!border-warning dark:border-navy-500 dark:bg-navy-900"
name="outline_filled"
type="radio"
/>
<p>Warning</p>
</label>
<label class="inline-flex items-center space-x-2">
<input
class="form-radio is-outline h-5 w-5 rounded-full border-slate-400/70 bg-slate-100 before:!bg-error checked:!border-error hover:!border-error focus:!border-error dark:border-navy-500 dark:bg-navy-900"
name="outline_filled"
type="radio"
/>
<p>Error</p>
</label>
Outline Squircle
The radio component can have a squircle shape. Check out code for detail of usage
<label class="inline-flex items-center space-x-2">
<input
checked
class="form-radio is-outline h-5 w-5 rounded-md border-slate-400/70 before:bg-slate-500 checked:border-slate-500 hover:border-slate-500 focus:border-slate-500 dark:border-navy-400 dark:before:bg-navy-200 dark:hover:border-navy-200 dark:focus:border-navy-200"
name="outline_squircle"
type="radio"
/>
<p>Default</p>
</label>
<label class="inline-flex items-center space-x-2">
<input
class="form-radio is-outline h-5 w-5 rounded-md border-slate-400/70 before:bg-primary checked:border-primary hover:border-primary focus:border-primary dark:border-navy-400 dark:before:bg-accent dark:checked:border-accent dark:hover:border-accent dark:focus:border-accent"
name="outline_squircle"
type="radio"
/>
<p>Primary</p>
</label>
<label class="inline-flex items-center space-x-2">
<input
class="form-radio is-outline h-5 w-5 rounded-md border-slate-400/70 before:bg-secondary checked:border-secondary hover:border-secondary focus:border-secondary dark:border-navy-400 dark:before:bg-secondary-light dark:checked:border-secondary-light dark:hover:border-secondary-light dark:focus:border-secondary-light"
name="outline_squircle"
type="radio"
/>
<p>Secondary</p>
</label>
<label class="inline-flex items-center space-x-2">
<input
class="form-radio is-outline h-5 w-5 rounded-md border-slate-400/70 before:!bg-info checked:!border-info hover:!border-info focus:!border-info dark:border-navy-400"
name="outline_squircle"
type="radio"
/>
<p>Info</p>
</label>
<label class="inline-flex items-center space-x-2">
<input
class="form-radio is-outline h-5 w-5 rounded-md border-slate-400/70 before:!bg-success checked:!border-success hover:!border-success focus:!border-success dark:border-navy-400"
name="outline_squircle"
type="radio"
/>
<p>Success</p>
</label>
<label class="inline-flex items-center space-x-2">
<input
class="form-radio is-outline h-5 w-5 rounded-md border-slate-400/70 before:!bg-warning checked:!border-warning hover:!border-warning focus:!border-warning dark:border-navy-400"
name="outline_squircle"
type="radio"
/>
<p>Warning</p>
</label>
<label class="inline-flex items-center space-x-2">
<input
class="form-radio is-outline h-5 w-5 rounded-md border-slate-400/70 before:!bg-error checked:!border-error hover:!border-error focus:!border-error dark:border-navy-400"
name="outline_squircle"
type="radio"
/>
<p>Error</p>
</label>
Disabled Radio
The radio have their own style when disabled. Check out code for detail of usage.
<label class="inline-flex items-center space-x-2">
<input
disabled
class="form-radio is-basic h-5 w-5 rounded-full border-slate-400/70 checked:border-primary checked:bg-primary hover:border-primary focus:border-primary disabled:pointer-events-none disabled:border-slate-300 disabled:opacity-60 dark:border-navy-400 dark:checked:border-accent dark:checked:bg-accent dark:hover:border-accent dark:focus:border-accent dark:disabled:border-navy-450"
name="disabled"
type="radio"
/>
<p>Primary</p>
</label>
<label class="inline-flex items-center space-x-2">
<input
disabled
checked
class="form-radio is-basic h-5 w-5 rounded-full border-slate-400/70 checked:border-primary checked:bg-primary hover:border-primary focus:border-primary disabled:pointer-events-none disabled:border-slate-300 disabled:opacity-60 dark:border-navy-400 dark:checked:border-accent dark:checked:bg-accent dark:hover:border-accent dark:focus:border-accent dark:disabled:border-navy-450"
name="disabled"
type="radio"
/>
<p>Primary</p>
</label>
Radio Size
The radio component can have various sizes. Check out code for detail of usage.
<label class="inline-flex items-center space-x-2">
<input
checked
class="form-radio is-basic h-3 w-3 rounded-full border-slate-400/70 checked:border-primary checked:bg-primary hover:border-primary focus:border-primary dark:border-navy-400 dark:checked:border-accent dark:checked:bg-accent dark:hover:border-accent dark:focus:border-accent"
name="size"
type="radio"
/>
<p>1</p>
</label>
<label class="inline-flex items-center space-x-2">
<input
class="form-radio is-basic h-3.5 w-3.5 rounded-full border-slate-400/70 checked:border-primary checked:bg-primary hover:border-primary focus:border-primary dark:border-navy-400 dark:checked:border-accent dark:checked:bg-accent dark:hover:border-accent dark:focus:border-accent"
name="size"
type="radio"
/>
<p>2</p>
</label>
<label class="inline-flex items-center space-x-2">
<input
class="form-radio is-basic h-4 w-4 rounded-full border-slate-400/70 checked:border-primary checked:bg-primary hover:border-primary focus:border-primary dark:border-navy-400 dark:checked:border-accent dark:checked:bg-accent dark:hover:border-accent dark:focus:border-accent"
name="size"
type="radio"
/>
<p>3</p>
</label>
<label class="inline-flex items-center space-x-2">
<input
class="form-radio is-basic h-4.5 w-4.5 rounded-full border-slate-400/70 checked:border-primary checked:bg-primary hover:border-primary focus:border-primary dark:border-navy-400 dark:checked:border-accent dark:checked:bg-accent dark:hover:border-accent dark:focus:border-accent"
name="size"
type="radio"
/>
<p>4</p>
</label>
<label class="inline-flex items-center space-x-2">
<input
class="form-radio is-basic h-5 w-5 rounded-full border-slate-400/70 checked:border-primary checked:bg-primary hover:border-primary focus:border-primary dark:border-navy-400 dark:checked:border-accent dark:checked:bg-accent dark:hover:border-accent dark:focus:border-accent"
name="size"
type="radio"
/>
<p>5</p>
</label>
<label class="inline-flex items-center space-x-2">
<input
class="form-radio is-basic h-6 w-6 rounded-full border-slate-400/70 checked:border-primary checked:bg-primary hover:border-primary focus:border-primary dark:border-navy-400 dark:checked:border-accent dark:checked:bg-accent dark:hover:border-accent dark:focus:border-accent"
name="size"
type="radio"
/>
<p>6</p>
</label>
Radio Model
Model allows you to bind the value of an input element to data Check out code for detail of usage.
Value
<div x-data="{selectedFruit: ['apple']}">
<div class="inline-space">
<label class="inline-flex items-center space-x-2">
<input
x-model="selectedFruit"
value="apple"
class="form-radio is-outline h-5 w-5 rounded-full border-slate-400/70 before:bg-primary checked:border-primary hover:border-primary focus:border-primary dark:border-navy-400 dark:before:bg-accent dark:checked:border-accent dark:hover:border-accent dark:focus:border-accent"
name="model"
type="radio"
/>
<p>Apple</p>
</label>
<label class="inline-flex items-center space-x-2">
<input
x-model="selectedFruit"
value="pineapple"
class="form-radio is-outline h-5 w-5 rounded-full border-slate-400/70 before:bg-secondary checked:border-secondary hover:border-secondary focus:border-secondary dark:border-navy-400 dark:before:bg-secondary-light dark:checked:border-secondary-light dark:hover:border-secondary-light dark:focus:border-secondary-light"
name="model"
type="radio"
/>
<p>PineApple</p>
</label>
<label class="inline-flex items-center space-x-2">
<input
x-model="selectedFruit"
value="strawberry"
class="form-radio is-outline h-5 w-5 rounded-full border-slate-400/70 before:!bg-info checked:!border-info hover:!border-info focus:!border-info dark:border-navy-400"
name="model"
type="radio"
/>
<p>Strawberry</p>
</label>
<label class="inline-flex items-center space-x-2">
<input
x-model="selectedFruit"
value="orange"
class="form-radio is-outline h-5 w-5 rounded-full border-slate-400/70 before:!bg-success checked:!border-success hover:!border-success focus:!border-success dark:border-navy-400"
name="model"
type="radio"
/>
<p>Orange</p>
</label>
</div>
<p>Value <span x-text="selectedFruit"></span></p>
</div>