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

Default value

You can use the default() method if you need to specify a default value for a field.

default(mixed $default)
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')
    ];
}
 
//...
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)
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()
    ];
}
 
//...
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 nullable select nullable

Placeholder

The placeholder() method allows you to set placeholder attribute on the field.

placeholder(string $value)
placeholder(string $value)
use MoonShine\Fields\Select;
 
//...
 
public function fields(): array
{
    return [
        Select::make('Country', 'country')
            ->nullable()
            ->placeholder('Country')
    ];
}
 
//...
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'
                ]
            ])
    ];
}
 
//...
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 select group

Selecting Multiple Values

To select multiple values, you need the multiple() method

multiple(Closure|bool|null $condition = null)
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()
    ];
}
 
//...
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 select multiple

If you need to add a search among values, then you need to add the searchable() method.

searchable()
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()
    ];
}
 
//...
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 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)
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"
    }
]
[
    {
        "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')
    ];
}
 
//...
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)
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()
    ];
}
 
//...
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)
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'],
                //...
            ])
    ];
}
 
//...
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 belongs to image

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
            ])
    ];
}
 
//...
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()
Select::make('Type')->native()