Select

wu-select styles a native <select>. Core’s base styles already set the border, background, hover, focus ring, invalid border, disabled look, padding and the medium height; the kit adds the input radius and type size and draws the arrow in CSS.

Class or attribute	Effect
`wu-select`	Root, on `<select>`. Input look with an arrow at the inline end
`sm`, `lg`	Small and large control height, padding and type size
`multiple`, or `size` other than 1	List box: natural height, no arrow
`disabled`	Not-allowed cursor, plus the core disabled look
`aria-invalid="true"` or `:user-invalid`	Core’s danger border, doubled to 2px by the kit so the change is not color alone
`--wu-select--ArrowColor`	Arrow color, `text-muted` by default

Default

Country

<div class="wu-field">
  <label class="wu-field-label" for="select-country">Country</label>
  <select class="wu-select" id="select-country">
    <option>Canada</option>
    <option selected>Germany</option>
    <option>Japan</option>
    <option disabled>Unavailable</option>
  </select>
</div>

Sizes

<div class="flex col gap-3">
  <select class="wu-select sm" aria-label="Small">
    <option>Small</option>
    <option>Second option</option>
  </select>
  <select class="wu-select" aria-label="Default">
    <option>Default</option>
    <option>Second option</option>
  </select>
  <select class="wu-select lg" aria-label="Large">
    <option>Large</option>
    <option>Second option</option>
  </select>
</div>

States

<div class="flex col gap-3">
  <select class="wu-select" aria-label="Disabled" disabled>
    <option>Disabled</option>
  </select>
  <select class="wu-select" aria-label="Invalid" aria-invalid="true">
    <option>Invalid</option>
  </select>
  <select class="wu-select" aria-label="Arrow color" style="--wu-select--ArrowColor: var(--wu-brand)">
    <option>Brand arrow</option>
  </select>
</div>

List box

With multiple or a size above 1, the select keeps its natural height and shows no arrow.

<select class="wu-select" aria-label="Teams" multiple size="4">
  <option selected>Design</option>
  <option>Engineering</option>
  <option selected>Marketing</option>
  <option>Sales</option>
</select>

Customizable select

A single-line select opens a picker styled like the kit: raised surface, border, shadow, a hover tint and the selected option in the brand text color. The markup stays the same.

Accessibility

The control is a native <select>, so keyboard use and screen reader announcements are the browser’s own.
Give it a <label> or an aria-label.
In forced colors mode the select shows the system control and its own arrow.

Right to left

The arrow moves to the inline end, on the left.

الدولة

<div class="wu-field">
  <label class="wu-field-label" for="select-rtl">الدولة</label>
  <select class="wu-select" id="select-rtl">
    <option>كندا</option>
    <option selected>ألمانيا</option>
  </select>
</div>

Load only the select

@use "@wovenui/components/select";

The select needs no other component. It relies on core’s base styles for fields. The examples above also use the field.