Formuláře

Select

Dropdown select se statickými nebo dynamickými options, hledáním a multi-selectem.

Dropdown select se statickými nebo dynamickými options, hledáním a multi-selectem.

use NyonCode\WireForms\Components\Select;

Mobil. Dropdown/hledací panel se otevře jako bottom sheet pod nakonfigurovaným breakpointem (searchable selecty zůstanou plovoucím panelem ve výchozím stavu, aby vyhledávací box zůstal použitelný). Přepište per pole pomocí ->sheetOnMobile() / ->mobileBreakpoint('md') — viz mobilní prezentace.

Základní použití

Select::make('role')
    ->options([
        'admin' => 'Administrator',
        'editor' => 'Editor',
        'user' => 'User',
    ])

Dynamické options

Select::make('category_id')
    ->options(fn () => Category::pluck('name', 'id')->toArray())
    ->placeholder('Choose category')

Options z enumu

Předejte třídu PHP enumu přímo místo pole — case se rozvinou na mapu value => label. Klíč je backing hodnota (nebo název case pro unit enumy) a label pochází z getLabel() enumu, když implementuje kontrakt Foundation\Contracts\Enum\HasLabel, s fallbackem na headline z názvu case.

use NyonCode\WireCore\Foundation\Contracts\Enum\HasLabel;
 
enum Status: string implements HasLabel
{
    case Draft = 'draft';
    case Published = 'published';
 
    public function getLabel(): ?string
    {
        return match ($this) {
            self::Draft => 'Draft',
            self::Published => 'Published',
        };
    }
}
 
Select::make('status')->options(Status::class)
// → ['draft' => 'Draft', 'published' => 'Published']

Enum bez HasLabel stále funguje — z názvu case se udělá headline pro label (LowPriority → Low Priority). Closura vracející třídu enumu se rozvine také.

Automatická validace. Jednohodnotový Select (nebo Radio), jehož options pocházejí z enumu, je automaticky omezen na tyto hodnoty pravidlem in: — odeslání mimo enum je odmítnuto, aniž byste ho museli znovu uvádět. Přeskočí se pro multiple() selecty (stav pole) a když deklarujete vlastní pravidlo in: / Rule::in() / Rule::enum().

Stejná zkratka ->options(Enum::class) funguje na Radio, CheckboxList, table SelectColumn a table SelectFilter.

Vyhledávatelné

Select::make('user_id')
    ->options(fn () => User::pluck('name', 'id')->toArray())
    ->searchable()
    ->noSearchResultsMessage('No users found')
    ->searchPrompt('Type to search...')
    ->loadingMessage('Loading...')

Remote hledání

Místo filtrování přednačteného seznamu v prohlížeči resolvujte shody na serveru, jak uživatel píše:

Select::make('author_id')
    ->getSearchResultsUsing(fn (string $search) =>
        User::where('name', 'like', "%{$search}%")->limit(50)->pluck('name', 'id')->all()
    )
    ->getOptionLabelUsing(fn ($value) => User::find($value)?->name)

• getSearchResultsUsing() implikuje searchable() a vrací mapu value => label.
• getOptionLabelUsing() (single) / getOptionLabelsUsing() (multiple) resolvují label(y) pro aktuální výběr, takže trigger zůstane čitelný i když vybraná option nebyla nikdy přednačtena.
• preload() dychtivě naplní remote seznam při renderu (spustí search callback s prázdným výrazem) místo čekání na první stisk klávesy.

Hostitel musí vystavit search endpoint — jakákoli WithForms komponenta nebo table action modal to dělá. BelongsToSelect dostane remote hledání řízené relací automaticky.

Create & Edit options

Nechte uživatele vytvořit novou option — nebo editovat vybranou — z modalu bez opuštění formuláře:

Select::make('category_id')
    ->options(fn () => Category::pluck('name', 'id')->all())
    ->createOptionForm([
        TextInput::make('name')->required(),
    ])
    ->createOptionUsing(fn (array $data) => Category::create($data)->getKey())
    ->editOptionForm([
        TextInput::make('name')->required(),
    ])
    ->fillEditOptionUsing(fn ($value) => Category::find($value)->only('name'))
    ->updateOptionUsing(fn ($value, array $data) => Category::find($value)->update($data))

Prvek „+ Create" (a pro vybranou hodnotu „Edit") se objeví v patičce panelu comboboxu a otevře izolovaný modal. Validace drží modal otevřený s chybami; při úspěchu se nová hodnota vybere (přidá u multi-selectu).

• createOptionUsing() vrací hodnotu nové option — skalární klíč nebo model, jehož klíč se použije.
• Editace cílí na jedinou vybranou option, takže není dostupná na multiple().
• createOptionModalHeading() / editOptionModalHeading() přizpůsobí nadpisy.
• Funguje v samostatných WithForms komponentách i uvnitř table action modalů.
• Aby nově vytvořená hodnota vykreslila label, spárujte s getOptionLabelUsing() nebo přednačteným seznamem options.
• Vytvořená/editovaná option se okamžitě sloučí do otevřeného comboboxu (hostitel odesílá browser události select-option-created / select-option-updated) — žádné obnovení stránky není potřeba.

Reaktivita

Combobox se váže deferred ve výchozím stavu. Přidejte live(), když na výběr reagují jiná pole — afterStateUpdated(), visibleWhen() souseda nebo Form::live() — aby se výběr option synchronizoval na server při kliknutí místo čekání na další roundtrip:

Select::make('type')
    ->options([...])
    ->live()
    ->afterStateUpdated(fn ($state, $set) => $set('label', ucfirst((string) $state)))

Multi-select

Select::make('tags')
    ->multiple()
    ->maxItems(5)
    ->minItems(1)
    ->options([...])

Relace

Select::make('author_id')
    ->relationship('author', 'name')
    ->searchable()

Nativní vs vlastní

Každý Select se ve výchozím stavu vykresluje přes vlastní combobox, takže searchable a non-searchable selecty sdílejí jeden design — searchable() jen přidá in-panel search input. Použijte native() pro nativní <select> element prohlížeče.

Select::make('country')
    ->searchable()      // combobox se search inputem
    ->native()          // vynutit nativní <select> prohlížeče

Boolean select

Select::make('active')
    ->boolean()         // Yes/No options

Disabled options

Vykreslit konkrétní options jako nevybíratelné:

Select::make('status')
    ->options([
        'draft'     => 'Draft',
        'review'    => 'In Review',
        'published' => 'Published',
        'archived'  => 'Archived',
    ])
    ->disabledOptions(['archived'])

Dynamické disabled options:

Select::make('tier')
    ->options(Plan::pluck('name', 'id')->toArray())
    ->disabledOptions(fn () => Plan::unavailable()->pluck('id')->toArray())

Metody

Label, hint, tooltip a další sdílené metody viz Společné API pole.