Select

A native select with the same label, hint and error wiring as every other field.

Preview

Code

The three render the same class names, the same ARIA and the same data attributes. That is checked when this site builds: a class in any of these samples that neither the markup contract nor the shipped stylesheet defines fails the build.

<div class="wsu-field">
  <label class="wsu-field__label" for="term">Term</label>
  <select class="wsu-select" id="term" name="term">
    <option value="" disabled selected>Choose a term</option>
    <option>Winter 2027</option>
    <option>Fall 2027</option>
  </select>
</div>

<x-wsu::form.select
    name="term"
    label="Term"
    placeholder="Choose a term"
    :options="['Winter 2027', 'Fall 2027']" />

<Select
  v-model="form.term"
  name="term"
  label="Term"
  placeholder="Choose a term"
  :options="['Winter 2027', 'Fall 2027']"
/>

Why it works this way

Native, not a custom listbox. The platform control gets keyboard behavior, type-ahead, mobile pickers and forced-colors support for free, and none of them survive a rebuild in divs.
The placeholder option is disabled and has an empty value, so it cannot be submitted as an answer.

Accessibility

A label element with for (1.3.1).
aria-invalid and aria-describedby on error (3.3.1).

Success criteria in brackets refer to WCAG 2.2. Every one of them is checked by axe-core in both themes at three viewport widths before this page can be published. See Accessibility for what the gates are.

Props

Blade

Attribute	Default	What it does
`name`	`required`	Also the default id and error-bag key.
`label`	`null`	Rendered as a real label.
`options`	`[]`	Values, or value and label pairs.
`value`	`old input`	Falls back to old() on a failed submit.
`placeholder`	`null`	Disabled first option.
`hint`	`null`	Above the control, wired with aria-describedby.
`error`	`the error bag`	Pass a string to override.
`required`	`false`	Adds the required attribute and the "(required)" text.
`multiple`	`false`	Native multiple select.
`id`	`a slug of name`	Set it to change the id without changing name.
`bag`	`'default'`	Named error bag.

Vue

Prop	Type and default	What it does
`modelValue`	`String or Number, ''`	v-model.
`options`	`Array, []`	[{ value, label }] or plain strings.
`placeholder`	`String, ''`	Disabled first option.

Select ​