Inputs

Native select

The browser's own select element with the Prodular surface, for forms where the system picker works best.

npx prodular-ui add native-select

With a field

import { Field, FieldDescription, FieldLabel } from "@/components/ui/field"import {  NativeSelect,  NativeSelectOptGroup,  NativeSelectOption,} from "@/components/ui/native-select"
export default function NativeSelectDefault() {  return (    <Field className="max-w-xs">      <FieldLabel htmlFor="export-format">Export format</FieldLabel>      <NativeSelect id="export-format" defaultValue="csv" className="w-full">        <NativeSelectOptGroup label="Spreadsheets">          <NativeSelectOption value="csv">CSV</NativeSelectOption>          <NativeSelectOption value="xlsx">Excel workbook</NativeSelectOption>        </NativeSelectOptGroup>        <NativeSelectOptGroup label="Documents">          <NativeSelectOption value="pdf">PDF report</NativeSelectOption>          <NativeSelectOption value="json">JSON</NativeSelectOption>        </NativeSelectOptGroup>      </NativeSelect>      <FieldDescription>Uses the operating system menu, so it works well on phones.</FieldDescription>    </Field>  )}

Sizes and disabled

import { NativeSelect, NativeSelectOption } from "@/components/ui/native-select"
export default function NativeSelectSizes() {  return (    <div className="flex flex-wrap items-center justify-center gap-3">      {(["sm", "default", "lg"] as const).map((size) => (        <NativeSelect key={size} size={size} defaultValue="25" aria-label="Rows per page">          <NativeSelectOption value="25">25 rows</NativeSelectOption>          <NativeSelectOption value="50">50 rows</NativeSelectOption>          <NativeSelectOption value="100">100 rows</NativeSelectOption>        </NativeSelect>      ))}      <NativeSelect disabled defaultValue="25" aria-label="Rows per page">        <NativeSelectOption value="25">25 rows</NativeSelectOption>      </NativeSelect>    </div>  )}

Anatomy

<NativeSelect id="format" defaultValue="csv">  <NativeSelectOption value="csv">CSV</NativeSelectOption>  <NativeSelectOption value="pdf">PDF report</NativeSelectOption></NativeSelect>

Guidance

Use it when

Mobile-heavy flows, where the operating system picker is faster.
Plain HTML forms that post without JavaScript.

Avoid

Options with icons, descriptions or custom rendering. Use Select.

Rules for AI agents

Published in llms-full.txt and the registry, so coding agents follow them when they build with this component.

NativeSelect is not linked by Field automatically. Give it an id and pass the same value to FieldLabel htmlFor.
className goes on the wrapper, so set width with className (w-full) and the select fills it.
Use NativeSelectOptGroup with a label to group options.

API

NativeSelect

Prop	Type	Default	Description
size	"sm" \| "default" \| "lg"	"default"	Height. Matches Button and Input.
className	string		Applied to the wrapper. Use it for width.