Select

Select elements from a list. This component comes in 2 flavors:

The <x-raw-select> component outputs a native <select> element for the selection.
This is the simpler component in terms of what is generated into the DOM and should be preferred whenever possible.
The more complicated <x-select> component leverages <x-dropdown>, allows to have additional properties, such as a label and icons and the ability to select multiple items.

Raw select

Select a value

Regular select

College (Raw select)

Pick 1 subject

College (Single select)

College (Multiple select)

<x-raw-select clearable color="info" title="Raw select" placeholder="Select a value"
	:options="['Item 1', 'Item 2', 'Item 3']"
/>
<x-select color="info" title="Regular select" placeholder="Select a value"
	:options="['Item 1', 'Item 2', 'Item 3']"
/>

<x-raw-select color="neutral" title="College (Raw select)" icon="heroicon-o-academic-cap" label="Year 1" placeholder="Pick 1 subject" rows="12">
	@foreach($subjects as $subject => $credits)
  	  <optgroup class="font-bold space-y-1" label="{{ $subject }}">
		@foreach($credits as $value => $name)
		  <option value="{{ $value }}">{!! $name !!}</option>
		@endforeach
  	  </optgroup>
  	@endforeach
</x-raw-select>

<x-select color="neutral" title="College (Single select)" icon="heroicon-o-academic-cap" label="Year 1" placeholder="Pick 1 subject" rows="12">
	@foreach($subjects as $subject => $credits)
  	  <optgroup class="font-bold space-y-1" label="{{ $subject }}">
		@foreach($credits as $value => $name)
		  <option value="{{ $value }}">{!! $name !!}</option>
		@endforeach
  	  </optgroup>
  	@endforeach
</x-select>

<x-select color="neutral" title="College (Multiple select)" icon="heroicon-o-academic-cap" label="Year 2" placeholder="Pick all your favorite subjects" multiple rows="12" max-rows="4">
	@foreach($subjects as $subject => $credits)
  	  <optgroup class="font-bold space-y-1" label="{{ $subject }}">
		@foreach($credits as $value => $name)
		  <option value="{{ $value }}">{!! $name !!}</option>
		@endforeach
  	  </optgroup>
  	@endforeach
</x-select>

Variables

subjects = [
  'English' => [
	'classical' => 'Classical litterature',
	'modern' => 'Modern litterature'
  ],
  'History' => [
	'antiquity' => 'Antiquity',
	'middle age' => 'Middle Age',
	'renaissance' => 'Renaissance',
	'modern-era' => 'Modern era',
	'xx-century' => 'XXth century',
  ],
  'Mathematics' => [
	'algebra' => 'Algebra',
	'calculus' => 'Calculus',
	'number-theory' => 'Number theory',
	'topology' => 'Topology',
	'trigonometry' => 'Trigonometry'
  ],
  'Physics' => [
	'astrophysics' => 'Astrophysics',
	'classical-mechanics' => 'Classical mechanics',
	'optics' => 'Optics',
	'quantum-mechanics' => 'Quantum mechanics'
  ]
];

#Styling

<x-select placeholder="Server location">
  <option>North America</option>
  <option>EU west</option>
  <option>South East Asia</option>
</x-select>

<x-select color="neutral" placeholder="Server location" rows="7">
  <option></option>
  <option>East Asia</option>
  <option>Middle East</option>
  <option>Europe</option>
  <option>Africa</option>
  <option>North America</option>
  <option>South America</option>
</x-select>

<x-select color="primary" placeholder="Pick an IDE">
  <option>VScode</option>
  <option>VScode fork</option>
  <option>Another VScode fork</option>
</x-select>

<x-select color="secondary" placeholder="Pick a language">
  <option>Zig</option>
  <option>Go</option>
  <option>Rust</option>
</x-select>

<x-select color="accent" placeholder="Color scheme">
  <option>Light mode</option>
  <option>Dark mode</option>
  <option>System</option>
</x-select>

<x-select color="info" placeholder="Pick a Framework">
  <option>React</option>
  <option>Vue</option>
  <option>Angular</option>
</x-select>

<x-select color="success" placeholder="Pick a Runtime">
  <option>npm</option>
  <option>Bun</option>
  <option>yarn</option>
</x-select>

<x-select color="warning" placeholder="Pick an OS">
  <option>Windows</option>
  <option>MacOS</option>
  <option>Linux</option>
</x-select>

<x-select color="error" placeholder="Pick an AI Model">
  <option>GPT-4</option>
  <option>Claude</option>
  <option>Llama</option>
</x-select>

#Multiple selection

#Simple use

With the multiple attribute, the component behavior changes on them, they will allow the selection of several options at once.
By default, the select list only shows about 4 items. Use the row={number} attribute to increase the limit.

<x-select color="neutral" placeholder="Favorite subject" rows="6" multiple>
  <option>Biology</option>
  <option>English</option>
  <option>Geography</option>
  <option>History</option>
  <option>Math</option>
  <option>Physics</option> 
  <option>Sports</option>
</x-select>

#Showing selected options on multiple rows

If the width of your <x-select> is too small in comparison with how many options can / are likely to be selected, not allowing the select to resize may make the reading very uncomfortable.
To solve the issue, the max-rows={number} attribute allows the component to grow to the specified number of rows if needed.

In the below example, we consider a case where we expect up to 10 options to be selected, but we do not want the control to grow to more than 3 rows high.

<x-select color="neutral" placeholder="Select many options" multiple max-rows="3">
  <option>Option 1</option>
  <option>Option 2</option>
  <option>Option 3</option>
  <option>Option 4</option>
  <option>Option 5</option>
  <option>Option 6</option>
  <option>Option 7</option>
  <option>Option 8</option>
  <option>Option 9</option>
  <option>Option 10</option>
  <option>Option 11</option>
  <option>Option 12</option>
</x-select>