Checkbox and Radio
Create consistent cross-browser and cross-device checkboxes and radios with our completely rewritten checks component.
Basic example
<x-form action="/docs/forms/checkbox-radio" method="get">
<fieldset class="mb-3">
<x-form.group name="checkbox-input" label="Checkbox input checked" check>
<x-form.input type="checkbox" value="checked" checked />
</x-form.group>
<x-form.group name="checkbox-input2" label="Checkbox input unchecked" check>
<x-form.input type="checkbox" value="unchecked" />
</x-form.group>
<x-form.group name="checkbox-input3" label="Checkbox input disabled" check>
<x-form.input type="checkbox" value="disabled" disabled />
</x-form.group>
</fieldset>
<fieldset class="mb-3">
<x-form.group name="radio-input" id="radio-input1" label="Default radio input" check>
<x-form.input type="radio" />
</x-form.group>
<x-form.group name="radio-input" id="radio-input2" label="Default checked radio input" check>
<x-form.input type="radio" checked />
</x-form.group>
<x-form.group name="radio-input" id="radio-input3" label="Default disabled radio input" check>
<x-form.input type="radio" disabled />
</x-form.group>
</fieldset>
<fieldset class="mb-3">
<x-form.group name="checkbox-input4" label="Switch input checked" check switch>
<x-form.input type="checkbox" value="checked" checked />
</x-form.group>
<x-form.group name="checkbox-input5" label="Switch input unchecked" check switch>
<x-form.input type="checkbox" value="unchecked" />
</x-form.group>
<x-form.group name="checkbox-input6" label="Switch input disabled" check switch>
<x-form.input type="checkbox" value="disabled" disabled />
</x-form.group>
</fieldset>
<x-button type="submit">Submit</x-button>
</x-form><form method="get"
action="/docs/forms/checkbox-radio">
<fieldset class="mb-3">
<div class="form-check">
<input type="checkbox"
name="checkbox-input"
id="checkbox-input"
checked="checked"
class="form-check-input"
value="checked"> <label for="checkbox-input"
class="form-check-label">Checkbox input checked</label>
</div>
<div class="form-check">
<input type="checkbox"
name="checkbox-input2"
id="checkbox-input2"
class="form-check-input"
value="unchecked"> <label for="checkbox-input2"
class="form-check-label">Checkbox input unchecked</label>
</div>
<div class="form-check">
<input type="checkbox"
name="checkbox-input3"
id="checkbox-input3"
class="form-check-input"
value="disabled"
disabled="disabled"> <label for="checkbox-input3"
class="form-check-label">Checkbox input disabled</label>
</div>
</fieldset>
<fieldset class="mb-3">
<div class="form-check">
<input type="radio"
name="radio-input"
id="radio-input1"
value=""
class="form-check-input"> <label for="radio-input1"
class="form-check-label">Default radio input</label>
</div>
<div class="form-check">
<input type="radio"
name="radio-input"
id="radio-input2"
value=""
checked="checked"
class="form-check-input"> <label for="radio-input2"
class="form-check-label">Default checked radio input</label>
</div>
<div class="form-check">
<input type="radio"
name="radio-input"
id="radio-input3"
value=""
class="form-check-input"
disabled="disabled"> <label for="radio-input3"
class="form-check-label">Default disabled radio input</label>
</div>
</fieldset>
<fieldset class="mb-3">
<div class="form-check form-switch">
<input type="checkbox"
name="checkbox-input4"
id="checkbox-input4"
checked="checked"
role="switch"
class="form-check-input"
value="checked"> <label for="checkbox-input4"
class="form-check-label">Switch input checked</label>
</div>
<div class="form-check form-switch">
<input type="checkbox"
name="checkbox-input5"
id="checkbox-input5"
role="switch"
class="form-check-input"
value="unchecked"> <label for="checkbox-input5"
class="form-check-label">Switch input unchecked</label>
</div>
<div class="form-check form-switch">
<input type="checkbox"
name="checkbox-input6"
id="checkbox-input6"
role="switch"
class="form-check-input"
value="disabled"
disabled="disabled"> <label for="checkbox-input6"
class="form-check-label">Switch input disabled</label>
</div>
</fieldset>
<button type="submit"
class="btn btn-primary">Submit</button>
</form>Inline example
<x-form action="/docs/forms/checkbox-radio" method="get">
<x-form.group name="checkbox-input4" label="1" check inline>
<x-form.input type="checkbox" value="checked" checked />
</x-form.group>
<x-form.group name="checkbox-input5" label="2" check inline>
<x-form.input type="checkbox" value="unchecked" />
</x-form.group>
<x-form.group name="checkbox-input6" label="3 (disabled)" check inline>
<x-form.input type="checkbox" value="disabled" disabled />
</x-form.group>
<x-form.group name="radio-input2" id="radio-input4" label="1" check inline>
<x-form.input type="radio" value="checked" checked />
</x-form.group>
<x-form.group name="radio-input2" id="radio-input5" label="2" check inline>
<x-form.input type="radio" value="unchecked" />
</x-form.group>
<x-form.group name="radio-input2" id="radio-input6" label="3 (disabled)" check inline>
<x-form.input type="radio" value="disabled" disabled />
</x-form.group>
</x-form><form method="get"
action="/docs/forms/checkbox-radio">
<div class="form-check form-check-inline">
<input type="checkbox"
name="checkbox-input4"
id="checkbox-input4"
checked="checked"
class="form-check-input"
value="checked"> <label for="checkbox-input4"
class="form-check-label">1</label>
</div>
<div class="form-check form-check-inline">
<input type="checkbox"
name="checkbox-input5"
id="checkbox-input5"
class="form-check-input"
value="unchecked"> <label for="checkbox-input5"
class="form-check-label">2</label>
</div>
<div class="form-check form-check-inline">
<input type="checkbox"
name="checkbox-input6"
id="checkbox-input6"
class="form-check-input"
value="disabled"
disabled="disabled"> <label for="checkbox-input6"
class="form-check-label">3 (disabled)</label>
</div>
<hr class="invisible">
<div class="form-check form-check-inline">
<input type="radio"
name="radio-input2"
id="radio-input4"
checked="checked"
class="form-check-input"
value="checked"> <label for="radio-input4"
class="form-check-label">1</label>
</div>
<div class="form-check form-check-inline">
<input type="radio"
name="radio-input2"
id="radio-input5"
class="form-check-input"
value="unchecked"> <label for="radio-input5"
class="form-check-label">2</label>
</div>
<div class="form-check form-check-inline">
<input type="radio"
name="radio-input2"
id="radio-input6"
class="form-check-input"
value="disabled"
disabled="disabled"> <label for="radio-input6"
class="form-check-label">3 (disabled)</label>
</div>
</form>