# Select ## Props | Prop | Type | Default | Required | Description | |---|---|---|---|---| | `size` | `24 \| 32 \| 40 \| 48` | 32 | no | Height in px (24 \| 32 \| 40 \| 48). Replaces the native `size` attribute (which sets the visible option-row count on a listbox-style ``) with the design system's control height in pixels. | | `error` | `boolean` | false | no | Show error styling. | | `ref` | `Ref` | — | no | Forwarded ref to the underlying `` element. | | `className` | `string` | — | no | Additional CSS class name(s) merged onto the component's root element. | ## Theming Override `--ds-select-*` custom properties at any scope; interactive states derive automatically (L - 0.04 hover, L - 0.08 active). ## Rules - One accent per visual group; everything else neutral or ghost. - danger only for actions with real consequences. - Sizes are px numbers (24|32|40|48), never S/M/L. - Typography tokens are --ds-text-{size}-{lineHeight}-{weight}. - Override component tokens (--ds-{component}-*), not semantic tokens, for one-off theming. - --ds-button-font overrides button typography across all sizes (documented D34 override; ember → mono).