NativeSelect

Not the recommended select: use Select - and <Select native> when you want the platform's own picker, which renders this component for you with the same MenuItem children as every other select.

Source

Not the recommended select: use Select - and <Select native> when you want the platform's own picker, which renders this component for you with the same MenuItem children as every other select. NativeSelect is the low-level building block behind it: 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"
  options={[{ label: 'Web', value: 'web' }, { label: 'Android', value: 'android' }, { label: 'iOS', value: 'ios' }]}
  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"
  options={[{ label: 'Web', value: 'web' }, { label: 'Android', value: 'android' }, { label: 'iOS', value: 'ios' }]}
  error
  placeholder="Pick a platform"
/>

Controlled

Rows per page: 25

<ControlledNativeSelect />