Native Select

A native select lets users choose one option from a list. It styles the select element of the browser and leaves the open list to the browser, so the list appears in the form that users know from their browser and operating system. It accepts every attribute of the native select element except size: here, size sets the height of the select instead of the number of visible rows. A label names the choice, and htmlFor on the label refers to the id of the select, so a click on the label moves the focus to the select.

UsageCopy Anchor Link

import { Field, FieldLabel } from "@biem/ui/components/ui/field";
import { NativeSelect, NativeSelectOption } from "@biem/ui/components/ui/native-select";

export function NativeSelectDefault() {
	return (
		<div className="w-full max-w-sm">
			<Field>
				<FieldLabel htmlFor="receiving-store">Receiving store</FieldLabel>
				<NativeSelect id="receiving-store">
					<NativeSelectOption value="">Select a store</NativeSelectOption>
					<NativeSelectOption value="basel">Basel</NativeSelectOption>
					<NativeSelectOption value="bern">Bern</NativeSelectOption>
					<NativeSelectOption value="zurich">Zurich</NativeSelectOption>
				</NativeSelect>
			</Field>
		</div>
	);
}

ExamplesCopy Anchor Link

With GroupsCopy Anchor Link

A long list is easier to scan when its options follow categories that users already know, such as articles by department. Wrapped in a NativeSelectOptGroup, related options appear under the name given through label, and users can choose every option of the group but never its name.

SmallCopy Anchor Link

Above a table, a filter often shares a narrow row with other compact controls. With size set to "sm", the select takes less height, so it fits there and leaves the data in the foreground.

Default SizeCopy Anchor Link

Forms and dialogs need one consistent scale for all their fields. Unless another size is set, the select takes the size "default" and shares the height of an input, so a choice sits evenly among the entries around it.

ControlledCopy Anchor Link

A choice often drives other parts of the screen, such as the figures that load for a selected week. Through value and onChange the application holds the selection, so it reacts to every change and can set the choice itself, for example when users reset their filters.

DisabledCopy Anchor Link

Some choices apply only after an earlier step, such as a product line once users have chosen a brand. Until then, disabled keeps users from focusing the select or changing its choice, assistive technology reports it as unavailable, and the form leaves its value out on submit.

InvalidCopy Anchor Link

A required choice can still be missing when users submit a form, such as the unit in which an article is ordered. Set on the select, aria-invalid marks the error for users and for assistive technology, so they find at once which choice needs a correction.

API ReferenceCopy Anchor Link

NativeSelectCopy Anchor Link

NativeSelectOptionCopy Anchor Link

NativeSelectOption is one option that users can choose from the list. It renders an option and has no props of its own.

NativeSelectOptGroupCopy Anchor Link