Components / Select

Select

# Introduction

A select dropdown is ideal when you need to offer a large list of options, especially if screen space is limited or if the user needs to pick only one choice from many. It helps keep the interface clean and compact.

Radio buttons, on the other hand, are better when you have a small number of mutually exclusive options and want all choices to be visible to the user at once for easier comparison.

# Usage

The Select component needs <zinq:select.option> elements to define the options.

  
<zinq:select class="max-w-md">
    <zinq:select.option>8 GB</zinq:form.option>
    <zinq:select.option>16 GB</zinq:form.option>
    <zinq:select.option>32 GB</zinq:form.option>
</zinq:select>

# Customization

The Select component can be customized in many ways.

# Label

Like many other form components, the Select component can have a label. You can set the label by using the label attribute.

  
<zinq:select label="Memory size" class="max-w-md">
    <zinq:select.option>8 GB</zinq:form.option>
    <zinq:select.option>16 GB</zinq:form.option>
    <zinq:select.option>32 GB</zinq:form.option>
</zinq:select>

# Minimum width

By default the Select component will take the full width of the parent container. You can override this by setting the block attribute to false .

  
<zinq:select :block="false">
    <zinq:select.option>8 GB</zinq:form.option>
    <zinq:select.option>16 GB</zinq:form.option>
    <zinq:select.option>32 GB</zinq:form.option>
</zinq:select>

# Placeholder

The Select component will display Choose option placeholder if no placeholder is provided. You can override this by setting the placeholder attribute.

  
<zinq:select placeholder="Select memory size" class="max-w-md">
    <zinq:select.option>8 GB</zinq:form.option>
    <zinq:select.option>16 GB</zinq:form.option>
    <zinq:select.option>32 GB</zinq:form.option>
</zinq:select>

# Controlled

The Select component state can be changed from any other component. You can simply use Alpine's @click directive to toggle the state.

Just define an id for the select and use the Alpine.store to change the state.

Select best option
  
<zinq:select id="my-select-id" class="max-w-md">
    <zinq:select.option>8 GB</zinq:form.option>
    <zinq:select.option>16 GB</zinq:form.option>
    <zinq:select.option>32 GB</zinq:form.option>
</zinq:form.select>
<div class="mt-4">
    <zinq:badge
        @click="Alpine.store('zinq_selects')['my-select-id'].selected = '32 GB'"
        class="cursor-pointer select-none"
    >Select best option</zinq:badge>
</div>

# Default State

You can set the default state of the select by setting the selected attribute.

  
<zinq:select selected="32 GB" class="max-w-md">
    <zinq:select.option>8 GB</zinq:form.option>
    <zinq:select.option>16 GB</zinq:form.option>
    <zinq:select.option>32 GB</zinq:form.option>
</zinq:select>

# Livewire

You can use the wire:model directive to bind the Select to a Livewire property.

  
<zinq:select wire:model="memory">
    <zinq:select.option>8 GB</zinq:select.option>
    <zinq:select.option>16 GB</zinq:select.option>
    <zinq:select.option>32 GB</zinq:select.option>
</zinq:select>

# Live

You can also use wire:model.live to update the model on every select change.

Memory: 16 GB

  
public string $memory = '16 GB';

public function render(): string
{
    return <<<HTML
        <div>
            <p>Memory: {$this->memory}</p>
            <zinq:select wire:model.live="memory">
                <zinq:select.option>8 GB</zinq:form.option>
                <zinq:select.option>16 GB</zinq:form.option>
                <zinq:select.option>32 GB</zinq:form.option>
            </zinq:form.select>
        </div>
    HTML;
}

# Validation errors

The Select component will automatically display validation errors for you when wire:model attribute is used.

  
#[Rule('required')]
public string $memory = '';

public function save(): void
{
    $this->validate();
}

public function render(): string
{
    return <<<HTML
        <zinq:form action="save">
            <zinq:select wire:model="memory" placeholder="Choose memory size">
                <zinq:select.option>8 GB</zinq:select.option>
                <zinq:select.option>16 GB</zinq:select.option>
                <zinq:select.option>32 GB</zinq:select.option>
            </zinq:select>
            <zinq:button>Save to see validation error</zinq:button>
        </zinq:form>
    HTML;
}

# Manual validation errors

Or you can manually display validation errors by using the error attribute.

Looks like you need more memory
  
<zinq:select error="Looks like you need more memory" class="max-w-md">
    <zinq:select.option>8 GB</zinq:form.option>
    <zinq:select.option>16 GB</zinq:form.option>
    <zinq:select.option>32 GB</zinq:form.option>
</zinq:select>