Native Select

A styled native HTML select element for simple dropdown selections.

When to Use

Use Native Select for simple form dropdowns where you need native browser behavior, mobile-friendly interactions, or form submissions without JavaScript. For more customization options, see the Select component.

Basic Usage

Native SelectA styled native select element

Installation

pnpm add @corew500/ui

Usage

import { NativeSelect, NativeSelectOption } from "@mordecai-design-system/ui"

<NativeSelect>
  <NativeSelectOption value="">Select an option</NativeSelectOption>
  <NativeSelectOption value="option1">Option 1</NativeSelectOption>
  <NativeSelectOption value="option2">Option 2</NativeSelectOption>
</NativeSelect>

Examples

With Option Groups

<NativeSelect>
  <NativeSelectOption value="">Select a fruit</NativeSelectOption>
  <NativeSelectOptGroup label="Citrus">
    <NativeSelectOption value="orange">Orange</NativeSelectOption>
    <NativeSelectOption value="lemon">Lemon</NativeSelectOption>
  </NativeSelectOptGroup>
  <NativeSelectOptGroup label="Berries">
    <NativeSelectOption value="strawberry">Strawberry</NativeSelectOption>
    <NativeSelectOption value="blueberry">Blueberry</NativeSelectOption>
  </NativeSelectOptGroup>
</NativeSelect>

Sizes

<NativeSelect size="sm">
  <NativeSelectOption>Small</NativeSelectOption>
</NativeSelect>

<NativeSelect size="default">
  <NativeSelectOption>Default</NativeSelectOption>
</NativeSelect>

Disabled

<NativeSelect disabled>
  <NativeSelectOption>Disabled</NativeSelectOption>
</NativeSelect>

In a Form

<form>
  <div className="space-y-2">
    <label htmlFor="country" className="text-sm font-medium">
      Country
    </label>
    <NativeSelect id="country" name="country" required>
      <NativeSelectOption value="">Select a country</NativeSelectOption>
      <NativeSelectOption value="us">United States</NativeSelectOption>
      <NativeSelectOption value="ca">Canada</NativeSelectOption>
      <NativeSelectOption value="uk">United Kingdom</NativeSelectOption>
    </NativeSelect>
  </div>
</form>

Props

NativeSelect

Prop	Type	Default	Description
`size`	enum	`default`	Size variant of the select. - `default`: Standard height (h-9) - `sm`: Smaller height (h-8)

Supports all native <select> attributes.

NativeSelectOption

Supports all native <option> attributes.

NativeSelectOptGroup

Supports all native <optgroup> attributes.