Native select

The platform <select> styled to the Input rule: surface fill, border-input edge, 4px radius, 32 / 40 / 48 heights.

Prefer it on mobile and for lists over ~50 options where the OS picker beats a custom list; everywhere else use Select.

import { NativeSelect, NativeSelectOption } from "@stocklots/ui-components/components/native-select";

<NativeSelect size="sm" aria-label="Rows per page">
  <NativeSelectOption value="10">10</NativeSelectOption>
</NativeSelect>

Sizes

sm 32 · default 40 · lg 48, matching Input.

With label

FieldLabel htmlFor points at the select's id.

Groups

Optgroups render the OS's own separators and labels.

States

Disabled (with its reason), invalid (with its message).

Locked while the lot is publishing.