Required. The prompt shows in the placeholder color.
Select
Select keeps the portable semantics on one visible label, one native single-choice control, optional supporting or error text, and a small state set. The web API stays on one namespaced root hook, two optional message hooks, a size hook, and native select attributes.
Public web API
Select reuses the Text Field structure. A prompt is an empty first option, and only the closed control is styled.
<div data-bitsy-select>
<label for="ship-country">Country</label>
<select
id="ship-country"
name="ship-country"
autocomplete="country-name"
required
aria-describedby="ship-country-help"
>
<option value="" disabled selected>Choose a country</option>
<option value="ca">Canada</option>
<option value="mx">Mexico</option>
<option value="us">United States</option>
</select>
<p id="ship-country-help" data-bitsy-select-description>
We ship to these countries today.
</p>
</div>Add data-bitsy-size="sm" or "lg" on the root to match Text Field and Button heights. Use aria-invalid="true" with a data-bitsy-select-error message for the invalid state.
States and sizes
Each card shows one state on the native picker. Open any of them to see that the list itself stays native.
Choose a role before you send the invite.
Disabled keeps the field present but unavailable.
Foundation versus Bit
A bare <select> still inherits the foundation baseline and its gradient chevron. data-bitsy-select adds the field structure, message hooks, sizes, the empty state, a token-colored chevron that flips in right-to-left layouts, and invalid treatment. Multiple selection, search, and the customizable picker stay out of this first Bit.