Native Select

Overview

Native select has the same functionality as a native HTML select element, with additional custom styling and functionality. It cannot be used by itself and must be contained within a form field.

<daff-form-field>
  <fa-icon daffPrefix [icon]="faSort"></fa-icon>
  <daff-form-label>Sort by</daff-form-label>
  <select daff-native-select>
    <option value="featured">Featured</option>
    <option value="rating"
      >Customer rating, from the highest reviewed to the lowest
      reviewed</option
    >
    <option value="price-low-high">Price: Low to High</option>
    <option value="price-high-low">Price: High to Low</option>
    <option value="newest">Newest Arrivals</option>
  </select>
</daff-form-field>

Usage

Import DAFF_NATIVE_SELECT_COMPONENTS into your component:

import { DAFF_NATIVE_SELECT_COMPONENTS } from '@daffodil/design/native-select';

@Component({
  selector: 'custom-component',
  templateUrl: './custom-component.component.html',
  imports: [
    DAFF_NATIVE_SELECT_COMPONENTS,
  ],
})
export class CustomComponent {}

Anatomy

Native select must be used inside <daff-form-field> to enable proper state management and provide enhanced UI features such as hints, error messages, prefixes, and suffixes. The form field component also ensures accessibility compliance. For more details, see the form field documentation.

<daff-form-field>
  <daff-form-label>Sort By</daff-form-label>
  <select daff-native-select>
    <option value="price-low-high">Price: Low to High</option>
    <option value="price-high-low">Price: High to Low</option>
    <option value="newest">Newest Arrivals</option>
  </select>
</daff-form-field>

Features

Disabled

Native select can be disabled in two ways: using Angular's reactive forms with FormControl or with the native HTML disabled attribute.

<daff-form-field>
  <daff-form-label>Color</daff-form-label>
  <select daff-native-select [formControl]="control">
    <option value="black">Black</option>
    <option value="white">White</option>
    <option value="navy">Navy</option>
  </select>
</daff-form-field>

<daff-form-field>
  <daff-form-label>Size</daff-form-label>
  <select daff-native-select [disabled]="true">
    <option value="s">S</option>
    <option value="m">M</option>
    <option value="l">L</option>
  </select>
</daff-form-field>

Error

Native select supports validation and error messages through Angular's form validation system. Use <daff-error-message> within the form field to display context-specific error messages. Error messages automatically appear when the select is invalid and has been touched or submitted.

<daff-form-field>
  <daff-form-label>Select a size</daff-form-label>
  <select daff-native-select [formControl]="control">
    <option value="s">Small</option>
    <option value="m" disabled>Medium — sold out</option>
    <option value="l">Large</option>
    <option value="xl">XL</option>
  </select>
  <daff-hint>Unsure of your size? Check our size guide.</daff-hint>
  @if (control.errors?.required) {
    <daff-error-message>Please select a size.</daff-error-message>
  }
</daff-form-field>

Multiple error messages can be displayed conditionally based on the type of validation error. The form field component handles the styling and positioning of error messages.

Hints

Hints provide additional context or instructions to help users complete the select field correctly. Use <daff-hint> within the form field to display helpful information below the select. Unlike error messages, hints are always visible and provide guidance rather than validation feedback.

<daff-form-field>
  <daff-form-label>Shipping method</daff-form-label>
  <select daff-native-select [formControl]="control">
    <option value="">Select a shipping method</option>
    <option value="standard">Standard</option>
    <option value="expedited">Expedited</option>
    <option value="overnight">Overnight</option>
  </select>
  <daff-hint>Delivery times are estimates and may vary by location.</daff-hint>
</daff-form-field>

Accessibility

Built-in behavior

• When <daff-form-label> is used within <daff-form-field>, the label automatically associates with the select using the for and id attributes.

Developer responsibilities

• If a <daff-form-label> is not specified, use the <label> element to associate text with form elements explicitly. The for attribute of the label must exactly match the id of the form control.