NativeSelect

A styled <select> element with a custom chevron icon, optional label, description, and error message. Because it uses a native select, it works without JavaScript and has excellent accessibility out of the box.

Basic

<NativeSelect
  label="Choose a framework"
  data={['Davaux', 'Hono', 'Elysia', 'Fastify']}
/>

With option objects

<NativeSelect
  label="Country"
  data={[
    { value: 'us', label: 'United States' },
    { value: 'gb', label: 'United Kingdom' },
    { value: 'ca', label: 'Canada' },
    { value: 'au', label: 'Australia', disabled: true },
  ]}
/>

With description and error

Choose the plan that fits your needs.

Please select an option.

<NativeSelect
  label="Plan"
  description="Choose the plan that fits your needs."
  data={['Free', 'Pro', 'Enterprise']}
/>
<NativeSelect
  label="Required field"
  data={['Option A', 'Option B']}
  withAsterisk
  error="Please select an option."
/>

Sizes

<NativeSelect size="xs" data={['Option A', 'Option B']} />
<NativeSelect size="sm" data={['Option A', 'Option B']} />
<NativeSelect size="md" data={['Option A', 'Option B']} />

Props

PropTypeDefaultDescription
data(string|NativeSelectOption)[]—Options rendered as <option> elements (required)
idstring—Associates label with select via HTML for/id
labelReactNode—Label rendered above the select
descriptionReactNode—Helper text below the label
errorReactNode|boolean—Error message; pass true for styles only
requiredboolean—Marks field as required and adds asterisk
withAsteriskboolean—Adds asterisk without native required attribute
disabledboolean—Disables the select
size'xs'|'sm'|'md'|'lg'|'xl'—Font size and height via design tokens
radius'xs'|'sm'|'md'|'lg'|'xl'|string—Border-radius of the select
valuestring—Pre-selects the matching option (SSR snapshot)
namestring—Form field name
classstring—Additional CSS class names
styleobject—Inline styles