Radio

<x-radio name="radios" label="Radio #1" checked title="Title">
  <x-slot:label-checked>Radio #1 <span class="text-xs">(checked)</span></x-slot>
</x-radio>
<x-radio name="radios" label="Radio #2">
  <x-slot:label-checked>Radio #2 <span class="text-xs">(checked)</span></x-slot>
</x-radio>
<x-radio name="radios" label="Radio #3">
  <x-slot:label-checked>Radio #3 <span class="text-xs">(checked)</span></x-slot>
</x-radio>
<x-radio name="radios" label="Radio #4">
  <x-slot:label-checked>Radio #4 <span class="text-xs">(checked)</span></x-slot>
</x-radio>

<x-radio                   label="Default"   checked/>
<x-radio color="primary"   label="Primary"   checked/>
<x-radio color="secondary" label="Secondary" checked/>
<x-radio color="accent"    label="Accent"    checked/>
<x-radio color="info"      label="Info"      checked/>
<x-radio color="success"   label="Success"   checked/>
<x-radio color="warning"   label="Warning"   checked/>
<x-radio color="error"     label="Error"     checked/>

<x-radio size="xl" label="Huge"/>
<x-radio size="lg" label="Large"/>
<x-radio size="md" label="Medium"/>
<x-radio size="sm" label="Small"/>
<x-radio size="xs" label="Tiny"/>

<x-checkboxes title="Select your preferred transportation mode" color="info"
	:options="$transportationModes"			  
/>

<x-checkboxes title="Select your 1 favorite browser"
	:options="$browsers"
/>

<x-checkboxes horizontal title="Select your preferred transportation mode" color="info"
	:options="$transportationModes"			  
/>

<x-checkboxes horizontal title="Select your 1 favorite browser"
	:options="$browsers"
/>

transportationModes = [
	'boat' => 'Boat',
	'bus' => 'Bus',
	'car' => 'Car',
	'plane' => 'Plane',
	'train' => 'Train'
];
browsers = [
	'brave'     => 'Brave',
	'chrome'    => 'Chrome',
	'firefox'   => 'Firefox',
	'edge'      => 'Edge',
	'opera'     => 'Opera',
	'safari'    => 'Safari',
	'samsung'   => 'Samsung Internet',
	'ucbrowser' => 'UC Browser'
];