NativeSelect

Styled native <select> (keeps the system picker on touch devices). It extends the existing Select styling with a data-driven options API, optgroups, a placeholder and a compact size.

Import

import { NativeSelect } from "@jcsoftdev/ui/forms";

Single-component entry points tree-shake to just this component: @jcsoftdev/ui/forms/native-select.

Usage

<NativeSelect
  options={options}
  placeholder="Elige un barbero"
  aria-label="Barbero"
/>

Props

Prop	Type	Default	Description
options	(NativeSelectOption | NativeSelectGroup)[]		Data-driven alternative to <option> children; groups render as <optgroup>.
placeholder	string		Disabled first option shown while nothing is chosen.
size	"sm" | "md"	"md"
invalid	boolean

* marks a required prop.

It also accepts the native props of the element or primitive it renders (for example className, id, aria-* and event handlers).

Storybook stories

• Default
• Small
• Invalid
• Narrow
• Brutal Preset

Source

packages/ui/src/forms/native-select/native-select.tsx