Eric's UI Kit Docs & Demo
Boolean

The boolean input field allows the choice between two items, or a True/False or Yes/No selection.

field Yes (none)

The field on the form that this control refers to. This will most likely be a field on the form's related model. The field is used to generate defaults for other attributes if they are not explicitly specified. Note: this field is optional if you're hanging wire:model attributes off of the component for Livewire. See below.

label no ucfirst($field)

For type="radio", the label will be shown above the radio buttons.

For type="checkbox", the label will be shown to the right of the checkbox.

value no (none)

The value of the field. Should either be TRUE (1) or FALSE (0). The control will initially be set to this state.

type no "radio"

Set to one of "radio" or "checkbox". When set to "radio," the control will render as a set of True/False radio buttons. If set to "checkbox," the control will be a single checkbox.

Note that this is not the same as the type attribute used by other components, which specifies a color and style.

choices no "yn"

Shortcut for setting choicetrue and choicefalse. Can be one of "yn" (Yes/No) buttons, "oo" (On/Off), or "tf" (True/False). Only applicable when type is set to "radio."

choicetrue no "Yes"

Label for the "true" option when type is set to "radio." Defaults to "Yes" (a Yes/No) pair.

choicefalse no "No"

Label for the "false" option when type is set to "radio." Defaults to "No" (a Yes/No) pair.

Usage with Livewire

This component is ready to be used inside a Livewire component. It will render any wire: attributes on the <input /> component itself. When using <x-euikit::form.boolean /> in a Livewire component, the "field" attribute is optional, and will default to the value of wire:model.

Boolean Examples
<x-euikit::form.boolean field="Choice" />
<x-euikit::form.boolean choices="oo" field="Driveway Floodlight" value="true"/>
Burn after reading
<x-e::form.boolean type="checkbox" field="burn" value="1" label="Burn after reading" />