NativeSelect

Form

Styled native HTML select wrapper preserving browser behavior while maintaining design system consistency

NativeSelect

Accessible wrapper around the native HTML <select> element with variants, color styles, sizes, option groups and form helpers.

Basic usage

Use NativeSelect directly for simple dropdowns. You can provide options as plain <option> elements or via NativeSelectOption.

Simple select

With disabled option

Labels, description & error

Use the form helpers to build full field layouts including label, description and error messaging.

Form field layouts

Choose your country of residence.

Style variants

Change the surface appearance with the variant prop: default, bordered, filled and ghost.

Default

Bordered

Filled

Ghost

Color variants

Use semantic color variants like primary, secondary, success, warning, danger, info, purple, pink and cyan.

primary

secondary

success

warning

danger

info

purple

pink

cyan

Sizes

Control density with size. Use sm for compact controls, md for default and lg for prominent selects.

Small

Medium (default)

Large

Multiple

Enable multi-selection with the multiple prop. Use visibleOptions to control the number of visible rows.

Hold Ctrl or Cmd to select multiple values.

Select your favourites.

Option groups

Group related options with NativeSelectGroup to create structured dropdowns for locations, categories and more.

Grouped destinations

Select your travel destination.

Usage Guidelines

When to Use

  • Simple dropdowns
  • Mobile-first forms
  • Maximum compatibility

Accessibility

  • Native accessibility built-in
  • Works with all assistive tech

Performance

  • Native browser performance
  • Zero JavaScript overhead

Common Mistakes

  • Too many options without search
  • Long option labels

Frequently Asked Questions

NativeSelect uses the browser's native dropdown, which is better for mobile and simpler use cases.
Yes, NativeSelect maintains consistent styling while preserving native behavior on all platforms.

View on GitHub

See the full source code on GitHub

Related Components

View all
Autocomplete

Asynchronous search input with debounced queries, virtual scrolling for large datasets, and keyboard-driven selection

Checkbox

Accessible checkbox input with indeterminate state support and form integration

CheckboxGroup

Accessible CheckboxGroup for multi-selection, and form integration

ColorPicker

Color selection component with preset colors, HEX/RGB/HSL input, and visual picker interface

Previous

Menubar

Next

NavigationMenu