django/shadcn-ui

Native Select

The browser's own select element, styled to match the library.

Installation

uvx django_shadcn@latest add native_select

Usage

<c-native-select name="theme">
  <c-native-select.option value="light">Light</c-native-select.option>
  <c-native-select.option value="dark">Dark</c-native-select.option>
</c-native-select>

A real &lt;select&gt;, so it submits with the form, works without JavaScript and opens the platform picker on mobile. Reach for Select when you need custom option markup.

Examples

Small

<c-native-select size="sm">...</c-native-select>

Grouped options

<c-native-select>
  <c-native-select.optgroup label="Fruits">
    <c-native-select.option value="apple">Apple</c-native-select.option>
  </c-native-select.optgroup>
</c-native-select>

Disabled

<c-native-select disabled>...</c-native-select>

Invalid

<c-native-select aria-invalid="true">...</c-native-select>

From a Django form

<c-native-select name="country">
  {% for value, label in form.country.field.choices %}
  <c-native-select.option value="{{ value }}"
    >{{ label }}</c-native-select.option
  >
  {% endfor %}
</c-native-select>