Skip to content
Jaringan

Components · shadcn native-select

Select

Always native. The browser's own picker gives the right keyboard, screen-reader and phone behavior, and follows the color scheme in dark mode. shadcn ships this as NativeSelect.

Native select

Same anatomy as an input, with a CaretDown. The first option is an empty prompt. Campus options carry the bilingual name.

Preview
Show code
<NativeSelect id="campus" required defaultValue="">
  <NativeSelectOption value="" disabled>Choose a campus</NativeSelectOption>
  <NativeSelectOption value="cuhksz">CUHK-Shenzhen 香港中文大学（深圳）</NativeSelectOption>
</NativeSelect>

States

Identical to Input. While options load, it shows as disabled with “Loading…”.

Preview

Slots appear once the written test is graded.

Show code
<NativeSelect disabled><NativeSelectOption>Loading…</NativeSelectOption></NativeSelect>
<NativeSelect size="sm">…</NativeSelect>

Rules

  • Multi-select is a checkbox group instead.
  • A searchable custom listbox is allowed only in admin, following the WAI-ARIA combobox pattern (shadcn combobox).