# Checkboxes

{% tabs %}
{% tab title="Preview" %}
![](https://github.com/tanthammar/tall-forms/wiki/checkboxes.png)
{% endtab %}

{% tab title="Component" %}

#### Using labels as key

```php
$options = ['Wifi', 'Bluetooth', 'Ethernet'];

Checkboxes::make('Checkboxes')
    ->options($options)
    ->rules(['array', Rule::in($options)])
    ->default(['Wifi']);
}
```

#### Associative array

```php
$options = ['Wifi' => 'wf', 'Bluetooth' => 'bl', 'Ethernet' => 'eth'];

Checkboxes::make('Checkboxes')
    ->options($options)
    ->rules(['array', Rule::in(array_values($options))])
    ->default(['wf']);
}
```

#### Alpine

This field is an Alpine component to prevent lagging from user input

#### deferEntangle(false)

Entangle is deferred by default, add this if you want to send a network request on every user selection. You can also use `xmodel(...)`

#### options(mixed $options)

A list or flat `key => value` based `Array`, `Collection` or `Closure`. <br>

**OBSERVE**: if you use a callable, it will be executed on EVERY re-render of the component! Maybe you should consider setting the `$options` in `mount(`) instead?&#x20;

\
You can use a component method that returns an array; \
`options($this->someMethod())`
{% endtab %}

{% tab title="Headless" %}

```php
//Livewire properties example
public array $checkboxes = ['value1'];
public array $checkboxOptions = [ 'value1' => 'Label 1', 'value2' => 'Label 2' ];
```

```markup
<x-tall-checkboxes 
    :field="Checkboxes::blade('checkboxes')->options($checkboxOptions)"
/>
```

{% endtab %}

{% tab title="Styles" %}
Search for `Checkbox` in tall-theme.css
{% endtab %}
{% endtabs %}