Skip to main content
The Select component renders a standard HTML select dropdown with automatic option handling, model binding, and validation support.

​
Basic Usage

<x-forms::select 
    name="status" 
    label="Status" 
    :options="['draft' => 'Draft', 'published' => 'Published']" 
/>

​
Attributes

​
name
string
required
The name attribute for the select element
​
label
string
Label text for the select field. Auto-generated from name if not provided
​
options
array|QueryBuilder
default:"[]"
Options to display in the select. Can be:
  • Array with key-value pairs: ['value' => 'Label']
  • Eloquent query builder: Category::query()
  • Empty array (use slot for custom options)
​
placeholder
string
Placeholder text for empty option. Shows as first option with empty value
​
multiple
bool
default:"false"
Enable multiple selection. Automatically adds [] to name and includes sync field
​
model
mixed
Model instance for value binding. Can be Eloquent model, array, or object
​
default
mixed
Default selected value when no model is bound
​
required
bool
default:"false"
Mark field as required
​
disabled
bool
default:"false"
Disable the select element
​
show-label
bool
default:"true"
Show/hide the label element
​
show-placeholder
bool
default:"false"
Auto-generate placeholder from label if placeholder not provided
​
show-errors
bool
default:"true"
Display validation errors
​
show-js-errors
bool
default:"false"
Display JavaScript validation errors
​
inline
bool
default:"false"
Render in inline layout
​
floating
bool
default:"false"
Use floating label style
​
name-field
string
Field name to use for option labels when using Eloquent query (default: ‘name’)
​
id-field
string
Field name to use for option values when using Eloquent query (default: primary key)
​
relation
bool
default:"false"
Indicate this select represents a model relationship
​
exclude-sync-field
bool
default:"false"
Exclude the hidden sync field for multiple selects
​
sync-field-name
string
Custom name for the sync field (default: sync_{name})
​
tags
bool
default:"false"
Enable tag creation. Includes old input values as options
​
inline-label-class
string
CSS classes for inline label
​
inline-input-class
string
CSS classes for inline input wrapper
​
form-group-class
string
CSS classes for form group wrapper

​
Examples

​
With Placeholder

<x-forms::select 
    name="country" 
    placeholder="Choose a country..." 
    :options="['us' => 'United States', 'uk' => 'United Kingdom']" 
/>

​
Multiple Selection

<x-forms::select 
    name="sectors[]" 
    label="Sectors" 
    multiple
>
    <option value="tech">Technology</option>
    <option value="finance">Finance</option>
    <option value="health">Healthcare</option>
</x-forms::select>
Multiple selects automatically include a hidden sync field to handle empty submissions. Use exclude-sync-field to disable this behavior.

​
With Eloquent Query

<x-forms::select 
    name="category_id" 
    label="Category" 
    :options="App\Models\Category::query()" 
/>
By default, uses the model’s primary key for values and name field for labels.

​
Custom Field Names

<x-forms::select 
    name="author_id" 
    label="Author" 
    :options="App\Models\User::query()" 
    name-field="full_name"
    id-field="id"
/>

​
Model Binding

<x-forms::form :model="$article">
    <x-forms::select 
        name="status" 
        label="Status" 
        :options="['draft' => 'Draft', 'published' => 'Published']" 
    />
</x-forms::form>
The selected value is automatically set from $article->status.

​
Using Enum Values

<x-forms::form :model="$article">
    <x-forms::select 
        name="status" 
        label="Status" 
        :options="[
            'draft' => 'Draft',
            'published' => 'Published',
        ]" 
    />
</x-forms::form>
Supports backed enums - automatically extracts the enum value.

​
With Slot for Custom Options

<x-forms::select name="priority" label="Priority">
    <option value="low">Low Priority</option>
    <option value="medium">Medium Priority</option>
    <option value="high">High Priority</option>
</x-forms::select>
The slot is only used when the options attribute is empty.

​
Custom Sync Field

<x-forms::select 
    name="tags[]" 
    multiple 
    sync-field-name="custom_sync_name"
/>

​
Sync Field Behavior

When multiple is true, a hidden input field is automatically included: 
<input type="hidden" name="sync_sectors" value="1">
This ensures the field is included in form submissions even when no options are selected. The sync field is NOT added when:
  • exclude-sync-field is true
  • disabled is true
  • multiple is false

​
Value Binding

The component handles various value types:
  • Eloquent Models: Extracts the primary key or id-field value
  • Collections: Uses pluck() with id-field for multiple selects
  • Backed Enums: Automatically extracts the enum value
  • Arrays: Directly uses the array values
  • Old Input: Automatically populates from old() input

​
Option Sources

​
Array Options

:options="['key' => 'Label']"

​
Query Builder

:options="Category::query()"
:options="User::where('active', true)"
For query builders:
  • Automatically uses pluck($nameField, $idField)
  • Supports accessor attributes
  • Works with translatable models (Javaabu Translatable)

​
CSS Classes

The select element includes:
  • form-select - Bootstrap 5 select class
  • is-invalid - Added when validation errors exist
  • Additional Select2 classes when is-select2 is true (used internally by Select2 component)

Build docs developers (and LLMs) love

Get started for freeTalk to us