Native Select

A styled native HTML select element with consistent design system integration.

Examples

Default

<c-native-select native-select-classes="w-48">
  <option value="">Select status</option>
  <option value="todo">Todo</option>
  <option value="in-progress">In Progress</option>
  <option value="done">Done</option>
  <option value="cancelled">Cancelled</option>
</c-native-select>

With Groups

Organize options using <optgroup> for better categorization.

<c-native-select native-select-classes="w-48">
  <option value="">Select a food</option>
  <optgroup label="Fruits">
    <option value="apple">Apple</option>
    <option value="banana">Banana</option>
    <option value="blueberry">Blueberry</option>
  </optgroup>
  <optgroup label="Vegetables">
    <option value="carrot">Carrot</option>
    <option value="broccoli">Broccoli</option>
    <option value="spinach">Spinach</option>
  </optgroup>
</c-native-select>

Disabled

<c-native-select disabled native-select-classes="w-48">
  <option value="">Select status</option>
  <option value="todo">Todo</option>
  <option value="in-progress">In Progress</option>
  <option value="done">Done</option>
</c-native-select>

Invalid State

Show validation errors with the aria-invalid attribute.

<c-native-select aria-invalid="true" native-select-classes="w-48">
  <option value="">Select a country</option>
  <option value="us">United States</option>
  <option value="uk">United Kingdom</option>
  <option value="ca">Canada</option>
</c-native-select>

With Label

Framework 
<div class="grid w-full max-w-sm items-center gap-1.5">
  <c-label label-for="framework">Framework</c-label>
  <c-native-select id="framework" native-select-classes="w-full">
    <option value="">Select a framework</option>
    <option value="lwc">LWC</option>
    <option value="react">React</option>
    <option value="svelte">Svelte</option>
    <option value="vue">Vue</option>
  </c-native-select>
</div>

API Reference

NativeSelect

A styled wrapper around the native HTML <select> element. Use native <option> and <optgroup> elements as children.

Prop Type Default Description
value string '' Value of the component
disabled boolean false Whether the component is disabled
required boolean false -
name string '' -
native-select-classes string - Additional CSS classes for the element
aria-label string - -
aria-describedby string - -
aria-invalid string - -

Events

The NativeSelect component dispatches a valuechange custom event when the selection changes.

// Listen for value changes
selectElement.addEventListener('valuechange', (event) => {
  console.log('New value:', event.detail.value);
});