Question: How do I make the input required?

[ziming]

How do I make the input field have html5 required attribute?

Thank you and have a nice day

[asantibanez]

Hey @ziming. Thanks for your interest in the library.

You can export the views of the library and add it manually yourself in the default.blade.php view file under the vendor/livewire-select folder.

[ziming]

Hmm i'm kinda a noobie here so all my livewire select field will now be required? How do I make it on a case by case basis?

Currently i do it this way for search-input.blade.php, but it applies to all livewire select search fields

<input
    id="{{ $name }}"
    type="text"
    placeholder="{{ $placeholder }}"
    class="{{ $styles['searchInput'] }}"
    required
    wire:keydown.enter.prevent=""
    wire:model.debounce.300ms="searchTerm"

    x-on:click="isOpen = true"
    x-on:keydown="isOpen = true"

    x-on:keydown.arrow-up="selectUp(@this)"
    x-on:keydown.arrow-down="selectDown(@this)"
    x-on:keydown.enter.prevent="confirmSelection(@this)"
/>

[teofanis]

Hey @ziming,
The way I handle this is by using the afterMount($extras=[]) on my livewireselect component and then in the default.blade.php I check
array_key_exists('required', $extras) ? 'required' : '';
Hope it helps.

[luigi-dv]

Hi,

Are you using your component as a child one? In this case follow this steps:

-Call the Livewire model in your parent component

• Set the component as a Model
• Validate it in the Parent Controller Class Check The Livewire Docs

Hope this helps you 😊