Select
A blade component for select form element!
The select element with basic style and five reactions and four different sizes! This component has 4 specific attributes for the configuration and three have a default value! The options attribute is required for the select element options!
You can also use default HTML attributes like name, id for the select element in this component!
# Options
In this component, select element's options must be an associative array and set in the options attribute. This component treats this options array's key as options label and value as the option value.
@php$options = [ 'label' => 'value', 'Success' => 'success', 'True' => '1',];@endphp <x-btui-select :options="$options" /> Output:
<select> <option value="value"> label </option> <option value="success"> Success </option> <option value="1"> True </option> </select> # Type
This attribute defines the reaction for the select component and it has a default value and that is default. Available options are default, success, warning, danger, info.
<x-btui-select type="success"> </x-btui-select> # Size
This attribute defines the size for the select component and it has a default value and that is md. Available options are sm, md, lg, xl.
<x-btui-select size="md"> </x-btui-select> # Placeholder
This attribute defines the placeholder for the select component and it has a default value and that is select... .
select element does not have the placeholder attribute in default. So we set the first option as a placeholder.
<x-btui-select placeholder="select option.."> </x-btui-select> Change The Options!
<x-btui-select :options="$options" type="default" size="md" placeholder="Select..." /> Result:
See available options! (* means required)
| name | type | default | options |
|---|---|---|---|
| options* | array | [] | - |
| type | string | default | default, success, warning, danger, info |
| size | string | md | sm, md, lg, xl |
| placeholder | string | Select... | - |
Event Handlers
You can use events on components directly like this...
<x-btui-select onchange="showHide()" /> <x-btui-select wire:model="city" /> 