- Make
- Default value
- Placeholder
- Groups
- Selecting Multiple Values
- Search
- Asynchronous search
- Editing in preview
- Values with picture
- Options
- Native mode
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
- url for asynchronous request processing,
-$resource
- model resource referenced by the relationship,
-$condition
- method run 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' => '/images/ad.png'], 2 => ['image' => '/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', //... ])->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()