Checkbox

Title
<x-checkbox title="Title" color="primary">
  <x-slot:label>Label</x-slot>
  <x-slot:label-checked>Label <span class="text-xs">(checked)</span></x-slot>
</x-checkbox>

#Styling

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

#Size

Use the size attribute to increase of decrease the size of your checkboxes.

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

#Multiple checkboxes

As an alternative to Selects, the <x-checkboxes> component manages several checkboxes in a single value. Several checkboxes can be selected at once.
With horizontal, the checkboxes will be rendered in a line.

Select all transportation modes you once used
Select all the options that apply
Select all transportation modes you once used
Select all the options that apply
<x-checkboxes title="Select all transportation modes you once used" color="info"
	:options="$transportationModes"			  
/>

<x-checkboxes title="Select all the options that apply"
	:options="$browsers"
/>

<x-checkboxes horizontal title="Select all transportation modes you once used" color="info"
	:options="$transportationModes"			  
/>

<x-checkboxes horizontal title="Select all the options that apply"
	: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'
];