Components / forms

forms · @awesome-ds/react

Select

Native select with label and error.

Rules: rule.a11y.wcag-aa

State matrix

idlerequired
disabledrequired
errorrequired

Anatomy

  • label
  • native select
  • options
  • hint
  • error message

Keyboard contract

Uses platform-native select keyboard and type-ahead behavior.

Screen-reader contract

Label, selected option, hint, invalid state, and error are announced.

Content rules

  • Use recognizable option labels.
  • Avoid a disabled placeholder as the only instruction.

Public API

PropTyperequiredDescription
idstringrequiredAssociation identifier
labelstringrequiredField name
childrenReactNoderequiredNative option elements
hintstring—Associated supporting guidance
errorstring—Associated recovery message
…nativeSelectHTMLAttributes<HTMLSelectElement>—Native select attributes

Adaptation contracts

RTL
Keep label, input, hint, and error aligned to inline-start without changing DOM order.
High contrast
Use system field borders, focus indicators, and non-color invalid cues.
Reduced motion
Change validation and selection states without sliding or spring motion.

Verification IDs

Select/native-options

Live

Live

Copyable example

import { Select } from "@awesome-ds/react";

<Select id="role" label="Role"><option>Admin</option></Select>