NativeSelect

NativeSelect uses the browser select element with Falcon styling. Prefer it when native mobile behavior, autofill, or simple form submission matters more than a custom Select popup.

Basic usage

Code

<NativeSelect>
  <NativeSelectOption value="">Select warehouse...</NativeSelectOption>

  <NativeSelectOptGroup label="Primary">
    <NativeSelectOption value="north-yard">North Yard</NativeSelectOption>
    <NativeSelectOption value="south-yard">South Yard</NativeSelectOption>
  </NativeSelectOptGroup>

  <NativeSelectOptGroup label="Seasonal">
    <NativeSelectOption value="seed-shed">Seed Shed</NativeSelectOption>
    <NativeSelectOption value="fertilizer-terminal">
      Fertilizer Terminal
    </NativeSelectOption>
  </NativeSelectOptGroup>
</NativeSelect>

Small

Code

<NativeSelect size="sm">
  <NativeSelectOption value="">Select delivery window...</NativeSelectOption>
  <NativeSelectOption value="morning">Morning</NativeSelectOption>
  <NativeSelectOption value="afternoon">Afternoon</NativeSelectOption>
  <NativeSelectOption value="evening">Evening</NativeSelectOption>
</NativeSelect>

API

NativeSelect

Name	Type/Description
size = "default"	"default" | "sm" | undefined

NativeSelectOptGroup

No documented props

NativeSelectOption

No documented props