Design system

Native Select

A platform-native select with the shared Workshop styling.

Use the native select when platform menus, mobile behavior, and lightweight forms matter more than custom menu presentation.

Built on Workshop1 compositionUpstream API

Import

import {
  NativeSelect,
  NativeSelectOptGroup,
  NativeSelectOption,
} from "@workshop1/ui/components/native-select"

Composition

Pass options as children. Use NativeSelectOptGroup to label a related set of options without changing the native interaction model.

Accessibility

Give the control a visible Label, or provide an accessible name such as aria-label when the context already supplies the visual label.

Best practices

  • Prefer this component for simple forms and mobile-first flows.
  • Keep the option labels short and specific.
  • Use Select when the product needs custom grouped content or richer menu behavior.