generated from boboko/starter
31 lines
989 B
PHP
31 lines
989 B
PHP
|
@props([
|
||
|
|
'options' => [],
|
||
|
|
'value' => null,
|
||
|
|
'name' => null,
|
||
|
|
'ariaLabel' => null,
|
||
|
|
])
|
||
|
|
|
||
|
|
{{--
|
||
|
|
Native <select>, styled to match the site's bordered/uppercase look.
|
||
|
|
Usage:
|
||
|
|
<x-ui.select
|
||
|
|
:options="[['value' => 'a', 'label' => 'Option A'], ...]"
|
||
|
|
value="a"
|
||
|
|
ariaLabel="Sort products"
|
||
|
|
/>
|
||
|
|
--}}
|
||
|
|
|
||
|
|
<div class="relative inline-flex items-center">
|
||
|
|
<select
|
||
|
|
@if($name) name="{{ $name }}" @endif
|
||
|
|
@if($ariaLabel) aria-label="{{ $ariaLabel }}" @endif
|
||
|
|
{{ $attributes->merge(['class' => 'appearance-none bg-transparent border border-black pl-4 pr-10 py-2.5 font-display font-bold cursor-pointer focus:outline-none']) }}
|
||
|
|
>
|
||
|
|
@foreach($options as $option)
|
||
|
|
<option value="{{ $option['value'] }}" @selected($value === $option['value'])>{{ $option['label'] }}</option>
|
||
|
|
@endforeach
|
||
|
|
</select>
|
||
|
|
|
||
|
|
<x-ui.icon name="arrow-down" :size="16" class="pointer-events-none absolute right-4" />
|
||
|
|
</div>
|