NativeSelect

Server component, no client JS

ImportCopy Anchor Link

import { NativeSelect } from '@nizivo/react/native-select';

// Once per app (Getting started), after
// @nizivo/tokens/tokens.css and @nizivo/react/css/base.css
import '@nizivo/react/css/native-select.css';

Placed directly inside a Field, or through a function child, a NativeSelect is wired as plain attributes with no client code. It keeps the browser's own validation bubble rather than the Field's inline message, so do not mix it with Field-wired client controls in one native-validated form (see Field).

Static or interactiveCopy Anchor Link

Server. It ships no client JavaScript when a Server Component renders it, in every Next.js build mode; its code is bundled only when a client component (a 'use client' file) imports it. It is the static alternative to Select when the browser's own picker fits. Inside a Field (placed directly or through a function child) it is wired with no client code, but Turbopack and next dev still ship the Field's FieldScope module; FieldStatic ships none. How to choose.

In a client app (a Vite or React Router single-page app, or a 'use client' file) it is an ordinary React component: event handlers, refs and state work as usual. In a client app.

Text size on touch screensCopy Anchor Link

Under a coarse pointer (a phone or a tablet), the value is 16 px (Label/L) instead of 14 px (Label/M) at every size, as on the Select trigger, because iOS Safari zooms the page into a focused <select> whose text is smaller than 16 px. The box keeps its 32, 40 or 48 px height. --nz-native-select-font replaces the font on every pointer, so a page that sets it also decides whether iOS zooms.

ExamplesCopy Anchor Link

import type { JSX } from 'react';
import { Field } from '@nizivo/react/field';
import { NativeSelect } from '@nizivo/react/native-select';

export function NativeSelectExample(): JSX.Element {
  return (
    <Field label="Country" description="Where the order ships." required>
      <NativeSelect name="country" placeholder="Choose a country">
        <option value="IN">India</option>
        <option value="GB">United Kingdom</option>
        <option value="US">United States</option>
      </NativeSelect>
    </Field>
  );
}

import type { JSX } from 'react';
import { NativeSelect } from '@nizivo/react/native-select';

export function NativeSelectGroupsExample(): JSX.Element {
  return (
    <NativeSelect aria-label="Period" defaultValue="30d">
      <optgroup label="Recent">
        <option value="7d">Last 7 days</option>
        <option value="30d">Last 30 days</option>
      </optgroup>
      <optgroup label="Longer">
        <option value="12m">Last 12 months</option>
        <option value="all">All time</option>
      </optgroup>
    </NativeSelect>
  );
}

import type { JSX } from 'react';
import { NativeSelect } from '@nizivo/react/native-select';

export function NativeSelectSizesExample(): JSX.Element {
  return (
    <div style={{ display: 'flex', flexWrap: 'wrap', alignItems: 'center', gap: 12 }}>
      <NativeSelect size="sm" aria-label="Small" defaultValue="a">
        <option value="a">Small</option>
      </NativeSelect>
      <NativeSelect aria-label="Medium" defaultValue="a">
        <option value="a">Medium</option>
      </NativeSelect>
      <NativeSelect size="lg" aria-label="Large" defaultValue="a">
        <option value="a">Large</option>
      </NativeSelect>
    </div>
  );
}

import type { JSX } from 'react';
import { Field } from '@nizivo/react/field';
import { NativeSelect } from '@nizivo/react/native-select';

export function NativeSelectStatesExample(): JSX.Element {
  return (
    <div style={{ display: 'grid', gap: 16, maxInlineSize: 320 }}>
      <Field label="Shipping zone" error="Choose a zone that ships to this address.">
        {(control) => (
          <NativeSelect {...control} defaultValue="eu">
            <option value="eu">Europe</option>
            <option value="asia">Asia</option>
          </NativeSelect>
        )}
      </Field>
      <Field label="Currency" disabled>
        {(control) => (
          <NativeSelect {...control} defaultValue="INR">
            <option value="INR">Indian rupee</option>
          </NativeSelect>
        )}
      </Field>
    </div>
  );
}

PropsCopy Anchor Link

Other exportsCopy Anchor Link

NativeSelectProps type

import type { NativeSelectProps } from '@nizivo/react/native-select'

The props of NativeSelect, listed above.

NativeSelectState type

import type { NativeSelectState } from '@nizivo/react/native-select'

The render state of NativeSelect, listed above.

Data attributes and slotsCopy Anchor Link

Style parts by class (.nz-<slot>) and state by data attribute. Attribute meanings come from contracts/vocabulary.json.

CSS hooksCopy Anchor Link

Set a hook on the component's class or any ancestor to restyle it without specificity games; leave it unset for the default shown.

Layers: nz.components. Classes: .nz-native-select, .nz-native-select-chevron, .nz-native-select-icon, .nz-native-select-trigger.

AccessibilityCopy Anchor Link

These parts are interactive. Each gets the focus outline and touch-action rule from @nizivo/react/css/base.css (the nz.base layer), so the floor survives a restyle:

• native-select-trigger: draws the focus outline itself on keyboard focus.

KeyboardCopy Anchor Link

Source: a native <select> (native-select.tsx), which adds no key handling.

FigmaCopy Anchor Link

Node ids from design/component-map.json, which nz gen writes from component.json. The links open the Nizivo Figma library, which may ask you to sign in.

• Canonical: none
• Ghost masters: none