#MadeWithTwill Demo Chat Blog Guides Docs

Select

Content

screenshot

1Select::make()
2    ->name('sectors')
3    ->options(
4        Options::make([
5            Option::make('value', 'label'),
6            Option::make('value', 'label', selectable: false),
7            ...
8        ])
9    );
 1@php
 2    $selectOptions = [
 3        [
 4            'value' => 1,
 5            'label' => 'New York'
 6        ],
 7        [
 8            'value' => 2,
 9            'label' => 'London'
10        ],
11        [
12            'value' => 3,
13            'label' => 'Berlin'
14        ]
15    ];
16@endphp
17 
18<x-twill::select
19    name="office"
20    label="office"
21    placeholder="Select an office"
22    :options="$selectOptions"
23/>
 1@formField('select', [
 2    'name' => 'office',
 3    'label' => 'Office',
 4    'placeholder' => 'Select an office',
 5    'options' => [
 6        [
 7            'value' => 1,
 8            'label' => 'New York'
 9        ],
10        [
11            'value' => 2,
12            'label' => 'London'
13        ],
14        [
15            'value' => 3,
16            'label' => 'Berlin'
17        ]
18    ]
19])
Option Description Type/values Default value
name Name of the field string
label Label of the field string
options Array of options for the dropdown, must include value and label array
unpack Defines if the select will be displayed as an open list of options boolean false
columns Aligns the options on a grid with a given number of columns integer 0 (off)
searchable Filter the field values while typing boolean false
note Hint message displayed above the field string
placeholder Text displayed as a placeholder in the field string
required Displays an indicator that this field is required
A backend validation rule is required to prevent users from saving		 boolean false
default Sets a default value if empty string
disabled Disables the field boolean false

Select item option

Option Description Type/values Default value
selectable Defines if select item should be selectable in the select or not boolean true

Example of selectable prop usage:

 1@php
 2    $selectOptions = [
 3        [
 4            'value' => 1,
 5            'label' => 'New York'
 6        ],
 7        [
 8            'value' => 2,
 9            'label' => 'London'
10        ],
11        [
12            'value' => 3,
13            'label' => 'Berlin'
14            'selectable' => false // This item will be non-selectable in the select form component
15        ]
16    ];
17@endphp
18 
19<x-twill::select
20    name="office"
21    label="office"
22    placeholder="Select an office"
23    :options="$selectOptions"
24/>

A migration to save a select field would be:

1Schema::table('posts', function (Blueprint $table) {
2    ...
3    $table->integer('office')->nullable();
4    ...
5});

When used in a block, no migration is needed.

Select Unpacked

screenshot

1Select::make()
2    ->name('sectors')
3    ->unpack()
4    ->options(
5        Options::make([
6            Option::make('value', 'label'),
7            ...
8        ])
9    );
 1@php
 2    $selectOptions = [
 3        [
 4            'value' => 1,
 5            'label' => 'New York'
 6        ],
 7        [
 8            'value' => 2,
 9            'label' => 'London'
10        ],
11        [
12            'value' => 3,
13            'label' => 'Berlin'
14        ]
15    ];
16@endphp
17 
18<x-twill::select
19    name="office"
20    label="office"
21    placeholder="Select an office"
22    :unpack="true"
23    :options="$selectOptions"
24/>
 1@formField('select', [
 2    'name' => 'office',
 3    'label' => 'Office',
 4    'placeholder' => 'Select an office',
 5    'unpack' => true,
 6    'options' => [
 7        [
 8            'value' => 1,
 9            'label' => 'New York'
10        ],
11        [
12            'value' => 2,
13            'label' => 'London'
14        ],
15        [
16            'value' => 3,
17            'label' => 'Berlin'
18        ]
19    ]
20])

A migration to save the above select field would be:

1Schema::table('posts', function (Blueprint $table) {
2    ...
3    $table->string('discipline')->nullable();
4    ...
5});

When used in a block, no migration is needed.