NativeSelect

A styled native <select> form control. Renders options data as <option> elements, shows a dropdown affordance icon, and integrates with Form / FormControl context the same way TextInput does. Being native, it is keyboard-operable, screen-reader friendly, and SSR-safe by default.

import { NativeSelect } from '@soroush.tech/design-system/NativeSelect'

;<NativeSelect
  variant="outlined"
  placeholder="Pick a platform"
  options={[
    { label: 'Web', value: 'web' },
    { label: 'Android', value: 'android' },
    { label: 'iOS', value: 'ios' },
  ]}
  onChange={(value) => console.log(value)}
/>

Examples

Default

<NativeSelect variant="outlined" placeholder="Pick a platform" />

Variants

<Flex flexDirection="column" gap={3}>
  {(['outlined', 'default', 'underline', 'text'] as const).map((variant) => (
    <NativeSelect
      key={variant}
      variant={variant}
      options={platformOptions}
      placeholder={variant}
    />
  ))}
</Flex>

Sizes

<Flex gap={3} alignItems="center">
  {(['sm', 'md', 'lg'] as const).map((size) => (
    <NativeSelect
      key={size}
      size={size}
      variant="outlined"
      options={platformOptions}
      placeholder={size}
    />
  ))}
</Flex>

Error State

<NativeSelect variant="outlined" error placeholder="Pick a platform" />

Controlled

Rows per page: 25

<ControlledNativeSelect />

NativeSelect API reference