Checkbox

The <x-xf::checkbox> component is a custom Laravel Blade component used to render one or more checkboxes dynamically. It supports multiple options, default checked values, and different display types (block or inline). This component helps simplify form creation by allowing clean, reusable checkbox groups with minimal code.

It works well with model data binding, Laravel's old() helper, and can be styled or extended easily using additional attributes.

📄 `<x-xf::checkbox>`

📘 Description

The <x-xf::checkbox> component is a reusable Blade component designed to simplify the creation of checkbox inputs in Laravel applications. It supports multiple options, default checked states, and customizable layout types. This component is ideal for dynamic checkbox lists, form data binding, and clean UI.

It integrates with model binding (old() / $model->attribute) and supports both block and inline rendering.

✅ Usage Example

<x-xf::checkbox 
    name="permissions[]" 
    :options="['read' => 'Read', 'write' => 'Write', 'delete' => 'Delete']" 
    :checked="['write']" 
    type="inline" 
    :attr="['class' => 'mb-2']" 
    label="User Permissions"
/>

🔑 Props

Name	Type	Required	Default	Description
`name`	string	✅	—	Name of the checkbox input(s). Use `[]` for multiple values.
`options`	array	❌	[]	Key-value pairs: key = value attribute, value = label shown to user.
`checked`	array	❌	[]	Values that should be checked by default.
`type`	string	❌	'block'	Layout format: `block` or `inline`.
`attr`	array	❌	[]	Additional HTML attributes (like class, style, id).
`label`	string	❌	null	Optional label shown above the checkbox group.

🎨 Example Output

Given:

<x-xf::checkbox 
    name="features[]" 
    :options="['api' => 'API Access', 'ui' => 'User Interface', 'db' => 'Database']" 
    :checked="['api', 'db']" 
    type="block" 
    label="Enabled Features"
/>

Renders as:

✅ API Access
⬜ User Interface
✅ Database

🛡 Features

✅ Supports multiple selections
✅ Respects old() values
✅ Accepts custom classes and styles
✅ Works with model binding
✅ Block or inline layout options