Native Select

A styled native select element. Works with forms out of the box.

import { … } from '@inlaylab/ivorie/native-select'

import { ChangeDetectionStrategy, Component } from '@angular/core';
import { IV_NATIVE_SELECT_IMPORTS } from '@inlaylab/ivorie/native-select';

@Component({
  selector: 'demo-native-select',
  imports: [IV_NATIVE_SELECT_IMPORTS],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <iv-native-select>
      <select ivNativeSelect aria-label="Status">
        <option ivNativeSelectOption value="">Select status</option>
        <option ivNativeSelectOption value="todo">Todo</option>
        <option ivNativeSelectOption value="in-progress">In progress</option>
        <option ivNativeSelectOption value="done">Done</option>
      </select>
    </iv-native-select>
  `,
})
export default class NativeSelectDemo {}

Installation

CLI

npm

npx ivorie add native-select

import { … } from '@inlaylab/ivorie/native-select'

Use it when you want the browser's own picker: on phones, in long forms, or with no JavaScript overlay. For a custom list with search or rich items, use Select or Combobox.

Usage

import { IV_NATIVE_SELECT_IMPORTS } from '@inlaylab/ivorie/native-select';

<iv-native-select>
  <select ivNativeSelect aria-label="Status">
    <option ivNativeSelectOption value="todo">Todo</option>
    <option ivNativeSelectOption value="done">Done</option>
  </select>
</iv-native-select>

Examples

Groups

import { ChangeDetectionStrategy, Component } from '@angular/core';
import { IV_NATIVE_SELECT_IMPORTS } from '@inlaylab/ivorie/native-select';

@Component({
  selector: 'demo-native-select-groups',
  imports: [IV_NATIVE_SELECT_IMPORTS],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <iv-native-select>
      <select ivNativeSelect aria-label="Department">
        <optgroup ivNativeSelectOptGroup label="Engineering">
          <option ivNativeSelectOption value="frontend">Frontend</option>
          <option ivNativeSelectOption value="backend">Backend</option>
        </optgroup>
        <optgroup ivNativeSelectOptGroup label="Sales">
          <option ivNativeSelectOption value="enterprise">Enterprise</option>
          <option ivNativeSelectOption value="smb">Small business</option>
        </optgroup>
      </select>
    </iv-native-select>
  `,
})
export default class NativeSelectGroupsDemo {}

Small

import { ChangeDetectionStrategy, Component } from '@angular/core';
import { IV_NATIVE_SELECT_IMPORTS } from '@inlaylab/ivorie/native-select';

@Component({
  selector: 'demo-native-select-small',
  imports: [IV_NATIVE_SELECT_IMPORTS],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <iv-native-select size="sm">
      <select ivNativeSelect aria-label="Page size">
        <option ivNativeSelectOption value="10">10 rows</option>
        <option ivNativeSelectOption value="25">25 rows</option>
        <option ivNativeSelectOption value="50">50 rows</option>
      </select>
    </iv-native-select>
  `,
})
export default class NativeSelectSmallDemo {}

Reactive forms

Value: pro

import { ChangeDetectionStrategy, Component } from '@angular/core';
import { FormControl, ReactiveFormsModule } from '@angular/forms';
import { IV_NATIVE_SELECT_IMPORTS } from '@inlaylab/ivorie/native-select';

@Component({
  selector: 'demo-native-select-reactive-forms',
  imports: [IV_NATIVE_SELECT_IMPORTS, ReactiveFormsModule],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <div class="flex flex-col items-center gap-3">
      <iv-native-select>
        <select ivNativeSelect aria-label="Plan" [formControl]="plan">
          <option ivNativeSelectOption value="free">Free</option>
          <option ivNativeSelectOption value="pro">Pro</option>
          <option ivNativeSelectOption value="team">Team</option>
        </select>
      </iv-native-select>
      <p class="text-muted-foreground text-sm">Value: {{ plan.value }}</p>
    </div>
  `,
})
export default class NativeSelectReactiveFormsDemo {
  protected readonly plan = new FormControl('pro');
}

API

Every part also accepts class.

iv-native-select

The wrapper. It draws the chevron over the select.

Name	Type	Default	Description
`size`	`'default' \| 'sm'`	`'default'`	Height. The select inside gets the same `data-size`.

select[ivNativeSelect]

The select itself. Use formControl, formControlName or ngModel as on any select.

option[ivNativeSelectOption], optgroup[ivNativeSelectOptGroup]

Options and groups in system colors, so the open list stays readable in dark mode.

Accessibility

A native select: keyboard and screen readers work as in the browser. Give it a label or aria-label.