Select

It's like a fancy dropdown menu, letting you pick your choice from a list. Whether you're selecting your country or choosing your favorite flavor, the Select component makes picking options simple and stylish.

Adding the component

php artisan spur:add forms/select forms/field forms/label

If you use this to add the component, it will automatically add it to config/spur.php and auto-fetch the components files.

config/spur.php
"components": [
  'forms/select',
  'forms/field',
  'forms/label',
]

If you manually add the component in config/spur.php you would need to run
php artisan spur:fetch to import the component

Usage

Simple Select 

<x-spur.select >
  <option value="High Priority">High Priority</option>
  <option value="Urgent">Urgent</option>
  <option value="Critical">Critical</option>
  <option value="Normal">Normal</option>
  <option value="Minor">Minor</option>
  <option value="Optional">Optional</option>
</x-spur.select>

With Label 

<x-spur.field id="email-label">
    <x-spur.label>Priority</x-spur.label>
    <x-spur.select>
        <option value="High Priority">High Priority</option>
        <option value="Urgent">Urgent</option>
        <option value="Critical">Critical</option>
        <option value="Normal">Normal</option>
        <option value="Minor">Minor</option>
        <option value="Optional">Optional</option>
    </x-spur.select>
</x-spur.field>

With Label and Description

Select the priority of the task. 

<x-spur.field id="task-priority">
    <x-spur.label>Priority</x-spur.label>
    <x-spur.select>
        <option value="High Priority">High Priority</option>
        <option value="Urgent">Urgent</option>
        <option value="Critical">Critical</option>
        <option value="Normal">Normal</option>
        <option value="Minor">Minor</option>
        <option value="Optional">Optional</option>
    </x-spur.select>
    <x-spur.description>Select the priority of the task.</x-spur.description>
</x-spur.field>

Inline Field

Select the priority of the task. 

<x-spur.field id="task-priority" inline>
    <x-spur.label>Priority</x-spur.label>
    <x-spur.select >
        <option value="High Priority">High Priority</option>
        <option value="Urgent">Urgent</option>
        <option value="Critical">Critical</option>
        <option value="Normal">Normal</option>
        <option value="Minor">Minor</option>
        <option value="Optional">Optional</option>
    </x-spur.select>
    <x-spur.description>Select the priority of the task.</x-spur.description>
</x-spur.field>

Disabled Input

Select the priority of the task. 

<x-spur.field id="email" disabled>
    <x-spur.label>Priority</x-spur.label>
    <x-spur.select>
        <option value="High Priority">High Priority</option>
        <option value="Urgent">Urgent</option>
        <option value="Critical">Critical</option>
        <option value="Normal">Normal</option>
        <option value="Minor">Minor</option>
        <option value="Optional">Optional</option>
    </x-spur.select>
    <x-spur.description>Select the priority of the task.</x-spur.description>
</x-spur.field>

Invalid Input

Select the priority of the task. 

<x-spur.field id="priority" invalid>
    <x-spur.label>Priority</x-spur.label>
    <x-spur.select>
        <option value="High Priority">High Priority</option>
        <option value="Urgent">Urgent</option>
        <option value="Critical">Critical</option>
        <option value="Normal">Normal</option>
        <option value="Minor">Minor</option>
        <option value="Optional">Optional</option>
    </x-spur.select>
    <x-spur.description>Select the priority of the task.</x-spur.description>
</x-spur.field>