Components · Forms & selection

Select

A styled native <select> — accessible and keyboard-operable for free — with a custom chevron. The trigger matches the text input; the option list is the platform's.

Preview

Light

Plan

Region

Dark

Plan

Region

Accessibility

Plan

Region

Spec

Values and token references straight from the Zetta spec (trigger states; the custom select-content/select-item menu is the later JS-driven variant).

select

backgroundColor: {colors.surface-card}
textColor: {colors.ink}
placeholderColor: {colors.placeholder}
placeholderStyle: italic
borderColor: {colors.border-strong}
borderWidth: 1px
borderRadius: {rounded.base}
fontFamily: Geist
fontSize: 14px
fontWeight: 400
lineHeight: 1.6
height: 32px
paddingX: 14px
paddingY: 10px
chevronSize: 16px
chevronColor: {colors.muted}
cursor: pointer

select-hover

borderColor: {colors.border-strong}
boxShadow: {shadows.sm}

select-focus

borderColor: {colors.border-focus}
outline: 2px solid {colors.border-focus}
outlineOffset: 2px

select-invalid

borderColor: {colors.danger}

select-invalid-focus

borderColor: {colors.danger}
outline: 2px solid {colors.danger}
outlineOffset: 2px

select-disabled

backgroundColor: {colors.disabled-bg}
textColor: {colors.disabled-text}
borderColor: {colors.disabled-border}
cursor: not-allowed

select-content

backgroundColor: {colors.popover}
textColor: {colors.popover-foreground}
borderColor: {colors.hairline}
borderWidth: 1px
borderRadius: {rounded.base}
padding: 6px
shadow: {shadows.md}

select-item

textColor: {colors.ink}
fontFamily: Geist
fontSize: 14px
fontWeight: 400
borderRadius: {rounded.base}
paddingX: 12px
paddingY: 10px
cursor: pointer

select-item-hover

backgroundColor: {colors.accent}

select-item-selected

textColor: {colors.brand}
fontWeight: 500

Build with the skill

No package to install — hand this to your AI to generate the select in your stack.

Prompt for your AI

Implement the Zetta "Select" component in this project's stack using the zetta-design-md skill.

- Apply the `select` spec from the skill (variants: default, focus, invalid, disabled).
- Use this project's own component conventions and framework idioms.
- Reference the Zetta design tokens (CSS variables) for every color, radius, and shadow — never hardcode values.
- Implement all states (hover, focus, active, disabled, and invalid where applicable) with a visible 2px focus ring.
- Honor the Zetta guardrails (brand never shifts hue, shadows for overlays only, etc.) and verify in Light, Dark, and Accessibility.

Anatomy & rules

32px tall, 14px padding, 8px radius, border-strong border — mirrors Input. Hover lifts var(--shadow-sm); focus rings; disabled uses disabled tokens.
Style a native <select> with an appearance: none reset; the chevron is decorative (pointer-events: none).

Known gaps

The custom listbox menu (searchable combobox, multi-select, grouped options) is a later JS-driven variant.