Select
Styled native <select> with a caret icon and accent focus ring.
Preview
Team picker
<label class="nx-field"><span class="nx-field__label">Team</span><select class="nx-select"><option>Nordküste Reinigung</option><option>Atlas Facility</option></select></label><label className="nx-field">
<span className="nx-field__label">Team</span>
<NxSelect aria-label="Team">
<option>Nordküste Reinigung</option>
<option>Atlas Facility</option>
</NxSelect>
</label>API
React props (NxKit)
| Prop | Type | Default | Required | Description |
|---|---|---|---|---|
aria-label | string | undefined | Required unless wrapped in a <label> or given a title — NxSelect dev-warns otherwise. |
Classes
| Class | Description |
|---|---|
.nx-select | Native select styled to field-input tokens, caret background-image, RTL-mirrored caret position |
States
invalid (required team)
Pflichtfeld
Accessibility
- Needs an accessible name — aria-label / aria-labelledby, or a wrapping <label>; NxSelect dev-warns in non-production builds when none is found.
- aria-invalid="true" pairs with an aria-describedby error, same contract as Field.
Do / Don’t
- Do: Wrap in a <label> or pass aria-label.Don’t: Don't rely on a visually adjacent label with no for/aria-labelledby wiring.