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

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>

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.

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: [ngpSelect]
• Exported As: ngpSelect
• Host Directives: NgpFormControl, NgpHover, NgpFocusVisible, NgpPress

Define the disabled state.

Data Attributes

Attribute	Description	Value
data-hover	The hover state of the select.	true | false
data-focus-visible	The focus state of the select.	true | false
data-disabled	The disabled state of the select.	true | false