Native Select

A styled native HTML select element with consistent design system integration.

For a custom select component, see Select.

Code

import { NativeSelect, NativeSelectOption } from "@falcon/ui-kit";

export function Example() {
  return (
    <NativeSelect aria-label="Order status">
      <NativeSelectOption value="">Select order status</NativeSelectOption>
      <NativeSelectOption value="todo">Pending</NativeSelectOption>
      <NativeSelectOption value="in-progress">In Progress</NativeSelectOption>
      <NativeSelectOption value="done">Fulfilled</NativeSelectOption>
      <NativeSelectOption value="cancelled">Cancelled</NativeSelectOption>
    </NativeSelect>
  );
}

Composition

Simple

Options placed directly under NativeSelect (no NativeSelectOptGroup).

NativeSelect
|- NativeSelectOption
|- NativeSelectOption
|- NativeSelectOption
`- NativeSelectOption

With groups

Use NativeSelectOptGroup to organize options into categories.

NativeSelect
|- NativeSelectOptGroup
|  |- NativeSelectOption
|  `- NativeSelectOption
`- NativeSelectOptGroup
   |- NativeSelectOption
   `- NativeSelectOption

Groups

Use NativeSelectOptGroup to organize options into categories.

Code

import {
  NativeSelect,
  NativeSelectOptGroup,
  NativeSelectOption,
} from "@falcon/ui-kit";

export function Example() {
  return (
    <NativeSelect aria-label="Inventory location">
      <NativeSelectOption value="">Select location</NativeSelectOption>
      <NativeSelectOptGroup label="Distribution">
        <NativeSelectOption value="central-warehouse">
          Central Warehouse
        </NativeSelectOption>
        <NativeSelectOption value="north-terminal">
          North Terminal
        </NativeSelectOption>
        <NativeSelectOption value="south-terminal">
          South Terminal
        </NativeSelectOption>
      </NativeSelectOptGroup>
      <NativeSelectOptGroup label="Retail">
        <NativeSelectOption value="downtown-branch">
          Downtown Branch
        </NativeSelectOption>
        <NativeSelectOption value="west-branch">West Branch</NativeSelectOption>
        <NativeSelectOption value="east-branch">East Branch</NativeSelectOption>
      </NativeSelectOptGroup>
      <NativeSelectOptGroup label="Operations">
        <NativeSelectOption value="seed-treatment">
          Seed Treatment
        </NativeSelectOption>
        <NativeSelectOption value="custom-application">
          Custom Application
        </NativeSelectOption>
        <NativeSelectOption value="service-center">
          Service Center
        </NativeSelectOption>
      </NativeSelectOptGroup>
    </NativeSelect>
  );
}

Disabled

Add the disabled prop to the NativeSelect component to disable the select.

Code

import { NativeSelect, NativeSelectOption } from "@falcon/ui-kit";

export function Example() {
  return (
    <NativeSelect aria-label="Product category" disabled>
      <NativeSelectOption value="">Disabled</NativeSelectOption>
      <NativeSelectOption value="seed">Seed</NativeSelectOption>
      <NativeSelectOption value="fertilizer">Fertilizer</NativeSelectOption>
      <NativeSelectOption value="crop-protection">
        Crop Protection
      </NativeSelectOption>
    </NativeSelect>
  );
}

Invalid

Use aria-invalid to show a validation error.

Code

import { NativeSelect, NativeSelectOption } from "@falcon/ui-kit";

export function Example() {
  return (
    <NativeSelect aria-label="Product category" aria-invalid="true">
      <NativeSelectOption value="">Error state</NativeSelectOption>
      <NativeSelectOption value="seed">Seed</NativeSelectOption>
      <NativeSelectOption value="fertilizer">Fertilizer</NativeSelectOption>
      <NativeSelectOption value="crop-protection">
        Crop Protection
      </NativeSelectOption>
    </NativeSelect>
  );
}

Native Select vs Select

• Use NativeSelect for native browser behavior, better performance, or mobile-optimized dropdowns.
• Use Select for custom styling, animations, or complex interactions.

API

NativeSelect

Renders a browser-native <select> control inside a <div>. Accepts standard <select> props except native size; className applies to the wrapper.

Props

size

size?: "sm" | "default" = "default"

Selects the control’s predefined size. Defaults to "default".

NativeSelectOptGroup

Renders a native <optgroup> for a NativeSelect and accepts standard <optgroup> props.

NativeSelectOption

Renders a native <option> for a NativeSelect and accepts standard <option> props.