Select

forms

Native select input with label, helper text, error state with role=alert, custom chevron icon, focus ring, disabled state, and all native select attributes. Consistent with Input/Textarea form family.

Import

typescript
import { Select } from "packages/ui/src";

Props

SelectProps extends SelectHTMLAttributes

PropTypeRequired
labelstringNo
helperstringNo
errorstringNo
placeholderstringNo
optionsSelectOption[]Yes

Examples

Default

With Label & Helper

This determines your project template.

Error State

Please select a role.

Disabled

Pre-selected

Choose the target platform.

Metadata

Component Metadata
Familyforms
FrameworksNext.js, Astro/EmDash
DescriptionNative select input with label, helper text, error state with role=alert, custom chevron icon, focus ring, disabled state, and all native select attributes. Consistent with Input/Textarea form family.
PropsSelectProps extends SelectHTMLAttributes (label?: string, helper?: string, error?: string, placeholder?: string, options: SelectOption[])
Statesdefault, focused, error, disabled, with-label, with-placeholder
A11y
  • Label linked via htmlFor/id
  • aria-invalid when error
  • aria-describedby linking to error or helper
  • Error message has role=alert
Responsive
  • Full-width by default
  • Custom chevron icon via SVG
Motion
  • Border color and box-shadow transition on focus
Token Dependencies
  • components.select.background
  • components.select.borderColor
  • components.select.borderRadius
  • components.select.borderWidth
  • components.select.padding
  • components.select.fontSize
  • components.select.textColor
  • components.select.placeholderColor
  • components.select.focusBorderColor
  • components.select.focusRing
  • components.select.errorBorderColor
  • components.select.errorColor
  • components.select.labelColor
  • components.select.labelFontSize
  • components.select.helperColor
  • components.select.helperFontSize
  • components.select.chevronColor
  • components.select.disabledOpacity
Content Slotslabel (string), helper (string), error (string), placeholder (string), options (SelectOption[])
CMS Bindings
  • Field label from CMS schema
  • Options from CMS enum fields
  • Validation from CMS
Test Cases
  • Renders select element
  • Shows label text
  • Shows helper text
  • Shows error message
  • Error has role=alert
  • Has aria-invalid when error
  • Renders all options
  • Passes className through