Fields

Select

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'
])
];
}
 
//...

select

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()
];
}
 
//...

select nullabledark

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'
]
])
];
}
 
//...

select group dark

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.

select multiple dark.

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()
];
}
 
//...

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'],
//...
])
];
}
 
//...

belongs to image dark

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()