Design System/Atoms/Native Select

Native Select

Styled native HTML select. No JavaScript overhead — uses the browser's built-in dropdown. Best for mobile forms and performance-sensitive contexts.

Atom

Form · Input

When To Use

  • Use Native Select when the user needs to enter or choose information as part of a larger form or workflow.
  • Start from this pattern when you need the interaction, spacing, and state treatment to match the rest of the system.
  • Use the examples below to choose the least complex control that still communicates the user’s next step clearly.

When Not To Use

  • Do not introduce a heavier or more customizable control when a simpler native-style field is sufficient.
  • Do not hide required context, validation, or option meaning behind placeholder text alone.

Accessibility Notes

  • Keep a visible label or an equivalent accessible name attached to the control.
  • Surface validation and helper text programmatically so assistive technologies receive the same context as sighted users.
  • Preserve the native focus order and keyboard interactions instead of replacing them with custom behavior.

Key Props / API

Key exports

NativeSelect, NativeSelectOption, NativeSelectOptGroup

Example Code

import { NativeSelect, NativeSelectOption } from "@hilum/ui"

<NativeSelect defaultValue="">
  <NativeSelectOption value="" disabled>Select a country...</NativeSelectOption>
  <NativeSelectOption value="us">United States</NativeSelectOption>
  <NativeSelectOption value="ca">Canada</NativeSelectOption>
  <NativeSelectOption value="gb">United Kingdom</NativeSelectOption>
  <NativeSelectOption value="au">Australia</NativeSelectOption>
</NativeSelect>

Native Select · Basic

Single-value dropdown

Styled native select with a disabled placeholder option

Native Select · Grouped options

Options grouped by category

Use NativeSelectOptGroup to organize options by region or category

Native Select · States

Default, disabled, and invalid

Visual states for interaction feedback

Default

Disabled

Invalid

Native Select · With Field wrapper

With label and hint

Compose with Field for accessible form fields

Select your billing country.

Native Select · With error

Validation error state

Field surfaces the error message; NativeSelect shows the invalid border