# Make
The Select field includes all the basic methods.
use MoonShine\Fields\Select; //... public function fields(): array{ return [ Select::make('Country', 'country_id') ->options([ 'value 1' => 'Option Label 1', 'value 2' => 'Option Label 2' ]) ];} //...
# Default value
You can use the default()
method if you need to specify a default value for a field.
default(mixed $default)
use MoonShine\Fields\Select; //... public function fields(): array{ return [ Select::make('Country', 'country_id') ->options([ 'value 1' => 'Option Label 1', 'value 2' => 'Option Label 2' ]) ->default('value 2') ];} //...
# Nullable
Like all fields, if you need to store NULL, you need to add the nullable()
method
nullable(Closure|bool|null $condition = null)
use MoonShine\Fields\Select; //... public function fields(): array{ return [ Select::make('Country', 'country_id') ->options([ 'value 1' => 'Option Label 1', 'value 2' => 'Option Label 2' ]) ->nullable() ];} //...
# Placeholder
The placeholder()
method allows you to set placeholder attribute on the field.
placeholder(string $value)
use MoonShine\Fields\Select; //... public function fields(): array{ return [ Select::make('Country', 'country') ->nullable() ->placeholder('Country') ];} //...
# Groups
You can combine values into groups.
use MoonShine\Fields\Select; //... public function fields(): array{ return [ Select::make('City', 'city_id') ->options([ 'Italy' => [ 1 => 'Rome', 2 => 'Milan' ], 'France' => [ 3 => 'Paris', 4 => 'Marseille' ] ]) ];} //...
# Selecting Multiple Values
To select multiple values, you need the multiple()
method
multiple(Closure|bool|null $condition = null)
use MoonShine\Fields\Select; //... public function fields(): array{ return [ Select::make('Country', 'country_id') ->options([ 'value 1' => 'Option Label 1', 'value 2' => 'Option Label 2' ]) ->multiple() ];} //...
When using multiple()
for the Eloquent model, a field in the database type text or json is required.
You also need to add cast - json or array or collection.
# Search
If you need to add a search among values, then you need to add the searchable()
method
searchable()
use MoonShine\Fields\Select; //... public function fields(): array{ return [ Select::make('Country', 'country_id') ->options([ 'value 1' => 'Option Label 1', 'value 2' => 'Option Label 2' ]) ->searchable() ];} //...
# Asynchronous search
You can also organize an asynchronous search for the Select field.
To do this, you need to pass url to the async()
method,
to which a request with a query search parameter will be sent.
async(?string $asyncUrl = null)
The returned response with search results must be in json format.
[ { "value": 1, "label": "Option 1" }, { "value": 2, "label": "Option 2" }]
use MoonShine\Fields\Select; //... public function fields(): array{ return [ Select::make('Country', 'country_id') ->options([ 'value 1' => 'Option Label 1', 'value 2' => 'Option Label 2' ]) ->searchable() ->async('/search') ];} //...
# Editing in preview
The updateOnPreview()
method allows you to edit the Select field in preview mode.
updateOnPreview(?Closure $url = null, ?ResourceContract $resource = null, mixed $condition = null)
$url
- (optional) url for processing an asynchronous request,$resource
- (optional) model resource if the field is outside the resource$condition
- (optional) method execution condition.
The settings are not required and must be passed if the field is running out of resource.
use MoonShine\Fields\Select; //... public function fields(): array{ return [ Select::make(Country) ->updateOnPreview() ];} //...
# Values with picture
The optionProperties()
method allows you to add an image to a value.
optionProperties(Closure|array $data)
use MoonShine\Fields\Select; //... public function fields(): array{ return [ Select::make('Country', 'country_id') ->options([ 1 => 'Andorra', 2 => 'United Arab Emirates', //... ])->optionProperties(fn() => [ 1 => ['image' => 'https://moonshine-laravel.com/images/ad.png'], 2 => ['image' => 'https://moonshine-laravel.com/images/ae.png'], //... ]) ];} //...
# Options
All choices options are available to change via data attributes:
use MoonShine\Fields\Select; //... public function fields(): array{ return [ Select::make('Country', 'country_id') ->options([ 1 => 'Andorra', 2 => 'United Arab Emirates', //... ]) ->multiple() ->customAttributes([ 'data-max-item-count' => 2 ]) ];} //...
For more details please contact Choices .
# Native mode
The native()
method disables the Choices.js library and displays select in native mode
Select::make('Type')->native()