Primitives

Select

A select is a form control that allows users to select options from a list. This primitive enhances the native select element with improved accessibility and interaction handling for hover and focus.

import { Component } from "@angular/core";
import { NgpSelect } from "ng-primitives/select";

@Component({
  selector: "app-select",
  imports: [NgpSelect],
  template: `
    <select ngpSelect>
      <option value="24">24 hours</option>
      <option value="12">12 hours</option>
    </select>
  `,
  styles: `
    :host {
      display: contents;
    }

    select {
      all: unset;
      appearance: none;
      display: flex;
      width: 90%;
      align-items: center;
      height: 2.5rem;
      padding: 0 1rem;
      border-radius: 0.5rem;
      background-color: var(--ngp-background);
      text-align: start;
      box-shadow: var(--ngp-button-shadow);
      outline: none;
      background-position-x: calc(100% - 10px);
      background-position-y: 50%;
      background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0iIzczNzM3MyI+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNNS4yMiA4LjIyYS43NS43NSAwIDAgMSAxLjA2IDBMMTAgMTEuOTRsMy43Mi0zLjcyYS43NS43NSAwIDEgMSAxLjA2IDEuMDZsLTQuMjUgNC4yNWEuNzUuNzUgMCAwIDEtMS4wNiAwTDUuMjIgOS4yOGEuNzUuNzUgMCAwIDEgMC0xLjA2WiIgY2xpcC1ydWxlPSJldmVub2RkIj48L3BhdGg+PC9zdmc+");
      background-size: 1.25rem;
      background-repeat: no-repeat;
    }

    select[data-hover] {
      background-color: var(--ngp-background-hover);
    }

    select[data-focus-visible] {
      outline: 2px solid var(--ngp-focus-ring);
      outline-offset: 0;
    }

    select[data-press] {
      background-color: var(--ngp-background-active);
    }
  `,
})
export default class SelectExample {}

Import

Import the Select primitives from ng-primitives/select.

import { NgpSelect } from 'ng-primitives/select';

Usage

Assemble the select directives in your template.

<select ngpSelect>
  <option value="24">24 hours</option>
  <option value="12">12 hours</option>
</select>

Reusable Component

Create a reusable component that uses the NgpSelect directive.

import { Component } from '@angular/core';
import { Select } from './select';

@Component({
  selector: 'app-root',
  imports: [Select],
  template: `
    <select app-select>
      <option value="1">Option 1</option>
      <option value="2">Option 2</option>
    </select>
  `,
})
export default class App {}

Schematics

Generate a reusable select component using the Angular CLI.

ng g ng-primitives:primitive select

Options

path: The path at which to create the component file.
prefix: The prefix to apply to the generated component selector.
componentSuffix: The suffix to apply to the generated component class name.
fileSuffix: The suffix to apply to the generated component file name. Defaults to component.
exampleStyles: Whether to include example styles in the generated component file. Defaults to true.

Examples

Here are some additional examples of how to use the Select primitives.

Select Form Field

The select automatically integrates with the form field primitives.

Time Format

Choose between 12-hour and 24-hour time formats.

import { Component } from "@angular/core";
import {
  NgpDescription,
  NgpFormField,
  NgpLabel,
} from "ng-primitives/form-field";
import { NgpSelect } from "ng-primitives/select";

@Component({
  selector: "app-select-form-field",
  imports: [NgpSelect, NgpFormField, NgpLabel, NgpDescription],
  template: `
    <div ngpFormField>
      <label ngpLabel>Time Format</label>
      <p ngpDescription>Choose between 12-hour and 24-hour time formats.</p>
      <select ngpSelect>
        <option value="24">24 hours</option>
        <option value="12">12 hours</option>
      </select>
    </div>
  `,
  styles: `
    :host {
      display: contents;
    }

    [ngpFormField] {
      display: flex;
      flex-direction: column;
      gap: 6px;
      width: 90%;
    }

    [ngpLabel] {
      color: var(--ngp-text-primary);
      font-size: 0.875rem;
      line-height: 1.25rem;
      font-weight: 500;
      margin: 0;
    }

    [ngpDescription] {
      color: var(--ngp-text-secondary);
      font-size: 0.75rem;
      line-height: 1rem;
      margin: 0 0 4px;
    }

    select {
      all: unset;
      appearance: none;
      display: flex;
      width: 90%;
      align-items: center;
      height: 2.5rem;
      padding: 0 1rem;
      border-radius: 0.5rem;
      background-color: var(--ngp-background);
      text-align: start;
      box-shadow: var(--ngp-button-shadow);
      outline: none;
      background-position-x: calc(100% - 10px);
      background-position-y: 50%;
      background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0iIzczNzM3MyI+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNNS4yMiA4LjIyYS43NS43NSAwIDAgMSAxLjA2IDBMMTAgMTEuOTRsMy43Mi0zLjcyYS43NS43NSAwIDEgMSAxLjA2IDEuMDZsLTQuMjUgNC4yNWEuNzUuNzUgMCAwIDEtMS4wNiAwTDUuMjIgOS4yOGEuNzUuNzUgMCAwIDEgMC0xLjA2WiIgY2xpcC1ydWxlPSJldmVub2RkIj48L3BhdGg+PC9zdmc+");
      background-size: 1.25rem;
      background-repeat: no-repeat;
    }

    select[data-hover] {
      background-color: var(--ngp-background-hover);
    }

    select[data-focus-visible] {
      outline: 2px solid var(--ngp-focus-ring);
      outline-offset: 0;
    }

    select[data-press] {
      background-color: var(--ngp-background-active);
    }
  `,
})
export default class SelectFormFieldExample {}

API Reference

The following directives are available to import from the ng-primitives/select package:

NgpSelect

Apply the `ngpSelect` directive to a select element that you want to enhance.

Selector: select[ngpSelect]
Exported As: ngpSelect

ngpSelectDisabled

boolean

Whether the select is disabled.

Data Attributes

Attribute	Description
`data-hover`	Applied when the element is hovered.
`data-focus-visible`	Applied when the element is focused.
`data-disabled`	Applied when the element is disabled.

Getting Started