Native Select

When to UseCopy Anchor Link

• for a list of plain text options, such as payment terms or a currency
• when the list has to be the browser’s own, with the look and the keys of the browser and the operating system
• for a page that ships no Base UI, as it is a styled select element that depends only on its caret icon and cn

When Not to UseCopy Anchor Link

• for options with an icon or a second line, or for a list that has to match the interface (use a Select)
• for a list long enough to need a search (use a Combobox)

See Select for a comparison of the Select, the Native Select, and the Combobox.

AnatomyCopy Anchor Link

NativeSelect renders a wrapper div, the select, and the caret. className is applied to the wrapper, and other props are passed to the select.

SizesCopy Anchor Link

On NativeSelect, size is Summit’s prop, and the HTML attribute of the same name is omitted.

Use default for a Native Select next to an Input, as for a Select.

BehaviorCopy Anchor Link

The browser renders the list and decides where it opens, so Summit’s classes style only the closed control.

By default, a Native Select is as wide as its longest option. To make it fill its container, set className="w-full".

AccessibilityCopy Anchor Link

A Native Select renders the browser’s select element. Summit adds no key handling, so the browser and the operating system provide all of its keys.

InstallationCopy Anchor Link

npx shadcn@latest add @summit/native-select

UsageCopy Anchor Link

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

<NativeSelect aria-label="Payment terms" defaultValue="net-30">
    <NativeSelectOption value="receipt">Due on receipt</NativeSelectOption>
    <NativeSelectOption value="net-15">Net 15</NativeSelectOption>
    <NativeSelectOption value="net-30">Net 30</NativeSelectOption>
</NativeSelect>;

With GroupsCopy Anchor Link

To name a group, set label on NativeSelectOptGroup.

import { NativeSelect, NativeSelectOptGroup, NativeSelectOption } from '@/components/ui/native-select';

<NativeSelect aria-label="Currency" defaultValue="USD">
    <NativeSelectOptGroup label="Americas">
        <NativeSelectOption value="USD">US dollar</NativeSelectOption>
        <NativeSelectOption value="CAD">Canadian dollar</NativeSelectOption>
    </NativeSelectOptGroup>
    <NativeSelectOptGroup label="Europe">
        <NativeSelectOption value="EUR">Euro</NativeSelectOption>
        <NativeSelectOption value="GBP">British pound</NativeSelectOption>
    </NativeSelectOptGroup>
</NativeSelect>;

API ReferenceCopy Anchor Link

Other props are passed to the select element. NativeSelectOption and NativeSelectOptGroup accept the props of option and optgroup.