Components

NativeSelect

The browser's own select list, in a closed field that looks like Select.

Storybook: Storybook
Source: Source

When to use

In forms where the system picker works better on phones: country, province, month.
In simple forms that must work before JavaScript loads or are rendered on the server.

When not to use

When options need icons or descriptions: use Select.
For long lists that need search: use Combobox.
For several choices: use a multiple Select or CheckboxGroup.

Anatomy

Label: the Field label, bound with <label>.
Control: the <select>, with the border, fill and height of the Select trigger.
Chevron: a decorative icon at the end; clicks pass through to the control.
Help text and error: the Field description and error message.

Behaviour

The list is the browser’s own; opening, scrolling and choosing are left to the browser.
placeholder adds an empty first option. With required, it cannot be chosen again once a value is set.
onValueChange is called with the chosen value.

Guidelines

Do not mix Select and NativeSelect in one form.
Order the options meaningfully: alphabetically or by frequency.

Content

The label names the field; the placeholder is a short instruction such as “Choose”.
Option labels are short and distinct.

Select: options with icons and a custom list.
Combobox: long searchable lists.