Components

Select

Displays a list of options for the user to pick from, triggered by a button.

php artisan blatui:add select
<x-ui.select>
    <x-ui.select-trigger class="w-[180px]">
        <x-ui.select-value placeholder="Theme" />
    </x-ui.select-trigger>
    <x-ui.select-content>
        <x-ui.select-item value="light">Light</x-ui.select-item>
        <x-ui.select-item value="dark">Dark</x-ui.select-item>
        <x-ui.select-item value="system">System</x-ui.select-item>
    </x-ui.select-content>
</x-ui.select>

Grouped

<x-ui.select>
    <x-ui.select-trigger class="w-[180px]">
        <x-ui.select-value placeholder="Select a fruit" />
    </x-ui.select-trigger>
    <x-ui.select-content>
        <x-ui.select-group>
            <x-ui.select-label>Fruits</x-ui.select-label>
            <x-ui.select-item value="apple">Apple</x-ui.select-item>
            <x-ui.select-item value="banana">Banana</x-ui.select-item>
            <x-ui.select-item value="blueberry">Blueberry</x-ui.select-item>
            <x-ui.select-item value="pineapple">Pineapple</x-ui.select-item>
        </x-ui.select-group>
    </x-ui.select-content>
</x-ui.select>