Forms

Customize the native <select>s with custom CSS that changes the element’s initial appearance.

Basic example

Here’s a quick example to demonstrate form component styles.

Basic select

Basic select two

Basic with value

Basic multiple

Basic multiple with size 3

<x-form action="/docs/forms/select" method="get">
  <x-form.group name="basic-select" label="Basic select">
    <x-form.select>
      <option>Select</option>
      <option selected>First</option>
      <option>Second</option>
      <option>Third</option>
    </x-form.select>
  </x-form.group>

  <x-form.group name="basic-select2" label="Basic select two">
    <x-form.select :options="['Select', 'First', 'Second', 'Third']" selected="Second" />
  </x-form.group>

  <x-form.group name="basic-select3" label="Basic with value">
    <x-form.select :options="['' => 'Select', 'first' => 'First', 'second' => 'Second', 'third' => 'Third']" selected="third" />
  </x-form.group>

  <x-form.group name="basic-multiple" label="Basic multiple">
    <x-form.select :options="['Select', 'First', 'Second', 'Third']" :selected="['First', 'Second']" multiple />
  </x-form.group>

  <x-form.group name="basic-multiple2" label="Basic multiple with size 3">
    <x-form.select :options="['Select', 'First', 'Second', 'Third']" :selected="['Second', 'Third']" multiple size="3" />
  </x-form.group>

  <x-button type="submit">Submit</x-button>
</x-form>

<form method="get"
      action="/docs/forms/select">
  <div class="mb-3">
    <label for="basic-select"
         class="form-label">Basic select</label> <select name="basic-select"
         id="basic-select"
         aria-label="Basic select"
         class="form-select">
      <option>
        Select
      </option>
      <option selected>
        First
      </option>
      <option>
        Second
      </option>
      <option>
        Third
      </option>
    </select>
  </div>

  <div class="mb-3">
    <label for="basic-select2"
         class="form-label">Basic select two</label> <select name="basic-select2"
         id="basic-select2"
         aria-label="Basic select two"
         class="form-select">
      <option>
        Select
      </option>
      <option>
        First
      </option>
      <option selected>
        Second
      </option>
      <option>
        Third
      </option>
    </select>
  </div>

  <div class="mb-3">
    <label for="basic-select3"
         class="form-label">Basic with value</label> <select name="basic-select3"
         id="basic-select3"
         aria-label="Basic with value"
         class="form-select">
      <option value="">
        Select
      </option>
      <option value="first">
        First
      </option>
      <option value="second">
        Second
      </option>
      <option value="third"
              selected>
        Third
      </option>
    </select>
  </div>

  <div class="mb-3">
    <label for="basic-multiple"
         class="form-label">Basic multiple</label> <select name="basic-multiple"
         id="basic-multiple"
         aria-label="Basic multiple"
         class="form-select"
         multiple="multiple">
      <option>
        Select
      </option>
      <option selected>
        First
      </option>
      <option selected>
        Second
      </option>
      <option>
        Third
      </option>
    </select>
  </div>

  <div class="mb-3">
    <label for="basic-multiple2"
         class="form-label">Basic multiple with size 3</label> <select name="basic-multiple2"
         id="basic-multiple2"
         aria-label="Basic multiple with size 3"
         class="form-select"
         multiple="multiple"
         size="3">
      <option>
        Select
      </option>
      <option>
        First
      </option>
      <option selected>
        Second
      </option>
      <option selected>
        Third
      </option>
    </select>
  </div>
  <button type="submit"
        class="btn btn-primary">Submit</button>
</form>

With help text

An example using help text.

<x-form action="/docs/forms/select" method="get">

<x-form.group name="select-with-describe" label="Basic select two" help="This is a help block via prop help">
  <x-form.select :options="['Select', 'First', 'Second', 'Third']" selected="Second" />
</x-form.group>

            <x-button type="submit">Submit</x-button>
          </x-form>

<form method="get"
      action="/docs/forms/select">
  <div class="mb-3">
    <label for="select-with-describe"
         class="form-label">Basic select two</label> <select name="select-with-describe"
         id="select-with-describe"
         aria-describedby="select-with-describe-help"
         aria-label="Basic select two"
         class="form-select">
      <option>
        Select
      </option>
      <option>
        First
      </option>
      <option selected>
        Second
      </option>
      <option>
        Third
      </option>
    </select>
    <div id="select-with-describe-help"
         class="form-text">
      This is a help block via prop help
    </div>
  </div>
  <button type="submit"
        class="btn btn-primary">Submit</button>
</form>