NativeSelect

Code

import { Field, FieldLabel, NativeSelect } from "@fadymondy/nasaq/web";export function Country() {  return (    <Field>      <FieldLabel>Country</FieldLabel>      <NativeSelect        name="country"        defaultValue=""        required        placeholder="Choose a country"        options={[          { value: "eg", label: "Egypt" },          { value: "sa", label: "Saudi Arabia" },        ]}      />    </Field>  );}

Forms · beta

Live examples and controls: NativeSelect in the lab.

InstallCopy Anchor Link

npx shadcn@latest add https://docs.nasaqui.com/r/native-select.json

A styled <select>. Phones open their own wheel or sheet, it posts with plain HTML forms, and it is light.

When to useCopy Anchor Link

• Mobile-first forms and long plain lists (countries, time zones).
• Server forms that must work without JavaScript.

When not to useCopy Anchor Link

• Options with icons, descriptions or search: use Select or Combobox.
• Several values: use Combobox with multiple, or checkboxes.

ImportCopy Anchor Link

import { NativeSelect } from "@fadymondy/nasaq/web";
// inside this monorepo: "@nasaq/web"

Quick startCopy Anchor Link

import { Field, FieldLabel, NativeSelect } from "@fadymondy/nasaq/web";

export function Country() {
  return (
    <Field>
      <FieldLabel>Country</FieldLabel>
      <NativeSelect
        name="country"
        defaultValue=""
        required
        placeholder="Choose a country"
        options={[
          { value: "eg", label: "Egypt" },
          { value: "sa", label: "Saudi Arabia" },
        ]}
      />
    </Field>
  );
}

AnatomyCopy Anchor Link

NativeSelect                    data-slot="native-select" (wrapper)
├─ select                       Field control: gets the label, description and invalid state
│  ├─ option value=""           the placeholder (disabled when required)
│  └─ options / children
└─ ChevronDown                  at the inline end

APICopy Anchor Link

NativeSelect: every select prop except size, plus:

className goes on the wrapper; the other props go on the select.

AccessibilityCopy Anchor Link

• It is a real select: keyboard, screen readers and autofill work as the platform does.
• Inside Field, FieldLabel names it and FieldError describes it.
• Text is 16px on touch screens so iOS does not zoom.

RTL & i18nCopy Anchor Link

• The chevron sits at the inline end and the padding mirrors. Option text follows the page direction.

Styling & tokensCopy Anchor Link

• Same height, border, radius and focus ring as Input (h-control, rounded-control, --nq-focus).

Do / Don'tCopy Anchor Link

• Do use a placeholder like "Choose…" with required instead of preselecting a wrong value.
• Don't use it for fewer than four options: radios show the choice without a click.

RelatedCopy Anchor Link

• Select
• Combobox
• Field
• Form

LabCopy Anchor Link

https://docs.nasaqui.com/?path=/docs/components-forms-native-select--docs