Component contract
select
Native <select> wrapped as a design-system custom element — options passed as a prop, emits dsChange with the new value.
- Version
- v1.0.0
Props
| Name | Type | Values | Default |
|---|---|---|---|
| value | string | — | — |
| name | string | — | — |
| disabled | boolean | — | false |
| size | enum | md, lg | md |
| label | string | — | — |
| options | string | — | [] |
Events
| Name | Payload | Condition |
|---|---|---|
| dsChange | string | — |
Slot
- Name
- default
- Purpose
- not used — options are passed via the `options` prop as JSON string or array. Slotted <option> children are NOT projected into the internal <select>.
Tokens
- spacing
- sm, md, lg, xl
- radius
- sm, md
- font
- family, size-md
Accessibility
- native_element
- select
- labeling
- aria-label via the label prop (canonical) or ambient <label> wrapper (secondary, browser-computed accessible name).
- keyboard
- ["Tab focuses","Enter opens native popup","Arrow keys navigate options","Escape closes without change","Printable characters typeahead"]
- disabled_semantics
- native_disabled_attribute
- notes
- label prop is REQUIRED for WCAG conformance — a <select> with no accessible name fails axe rule select-name. Passing an ambient <label> around <ds-select> is best-effort and depends on browser accessible-name computation.
Raw validated JSON
{
"name": "select",
"version": "1.0.0",
"props": {
"value": {
"type": "string"
},
"name": {
"type": "string"
},
"disabled": {
"type": "boolean",
"default": false
},
"size": {
"type": "enum",
"values": [
"md",
"lg"
],
"default": "md"
},
"label": {
"type": "string"
},
"options": {
"type": "string",
"default": "[]"
}
},
"events": {
"dsChange": {
"payload": "string"
}
},
"slot": {
"name": "default",
"purpose": "not used — options are passed via the `options` prop as JSON string or array. Slotted <option> children are NOT projected into the internal <select>."
},
"tokens_used": {
"spacing": [
"sm",
"md",
"lg",
"xl"
],
"radius": [
"sm",
"md"
],
"font": [
"family",
"size-md"
]
},
"a11y": {
"native_element": "select",
"labeling": "aria-label via the label prop (canonical) or ambient <label> wrapper (secondary, browser-computed accessible name).",
"keyboard": [
"Tab focuses",
"Enter opens native popup",
"Arrow keys navigate options",
"Escape closes without change",
"Printable characters typeahead"
],
"disabled_semantics": "native_disabled_attribute",
"notes": "label prop is REQUIRED for WCAG conformance — a <select> with no accessible name fails axe rule select-name. Passing an ambient <label> around <ds-select> is best-effort and depends on browser accessible-name computation."
}
}