Toolbar
Beta

Select

Accessible selection control for finite option sets. It supports primitive and object options, normalized primitive form values, grouping, multiple selection, hydrated edit values, custom templates, Reactive Forms, Signal Forms, and the full fkt-field composition contract.

Import

import {FktSelectComponent} from "frakton-ng/select";

Selection

Selection fundamentals. Select is intended for finite, known option sets. When users need to search a large or remote dataset, use Autocomplete instead.

Basic

Primitive string options need no mapping configuration. The selected string is written directly to the form.

Object options

Rich objects use labelKey for display and valueKey for the stable primitive form value.

Function keys and grouping

labelKey, valueKey, and groupKey also accept functions for derived labels, identifiers, and group metadata.

Multiple selection

Multiple selection writes an array of primitive values and keeps the dropdown open while options are added or removed.

Hydrated values

Full option objects can be written programmatically on edit screens. The Select uses them as temporary preload data, renders their label, and normalizes the form value through valueKey.

Custom content

Item, group, header, footer, chip, and empty templates customize rendering without moving selection, keyboard navigation, active descendant, or form state into consumer code.


    

        

            Product catalog
            Select products to include in the order.
        

        
    


    

        {{ group.label }}
        {{ group.items.length }} products
    


    

        

        

            {{ item.label }}
            {{ item.raw | call: category }} · {{ item.value }}
        


        

            {{ item.raw | call: price }}
            
        

    


    

        Can't find a product?
        
    


    

        
        {{ item.label }}
        
    


    

        
        No products available
        {{ state.label }}

Lazy fetching

dropdownOpenChange can trigger a deferred request when a finite option list only needs to be fetched after the user first opens the Select. Dropdown behavior remains owned by the component.

Forms

Form integrations. Select implements ControlValueAccessor and supports both established Reactive Forms and Angular Signal Forms.

Reactive forms

Reactive Forms provide value, disabled, touched, required, and validation state to the internal field.

Signal forms

Signal Forms use the same Select API through formField; required and disabled state remain reactive.

Field composition and validations

Field composition and validation. Select composes fkt-field internally and exposes the same prefix, suffix, hint, error, size, label, and required-marker contract.

See the Field documentation for the complete field behavior.

Field composition

Prefixes, suffixes, and supporting content can be projected directly into the Select.


    
    

    Choose the person responsible for the review.
    Optional

Validations

Automatic errors use the configured field error resolver. Projecting fktError replaces that message for cases that need control-specific content.


    





    
        
    

    
        
        
            Select the user responsible for this task.

Select

API Reference

Value Model

fkt-select stores primitive values even when its options are rich objects.

  • Primitive options are used directly as labels and values.
  • labelKey derives the visible label from an object option.
  • valueKey derives the stable string or number stored by the form.
  • Multiple mode stores an array of primitive values.
  • Object values written programmatically are normalized through valueKey.

labelKey, valueKey, and groupKey accept property names or functions:

<fkt-select
    [labelKey]="getLabel"
    [valueKey]="getValue"
    [groupKey]="getGroup"
/>

Hydrated Values

Edit screens often receive the selected object before the current option list. A full option object written through a form is treated as preload data:

  • Its label is rendered immediately.
  • Its value is normalized through valueKey.
  • It is not automatically added to the dropdown.
  • A real option with the same value replaces the preload data when it arrives.

Field Composition

Select composes fkt-field and accepts its field inputs:

  • hint
  • showError
  • size
  • requiredMarker
  • hideLabel

It also exposes the field projection slots:

  • fktFieldPrefix
  • fktFieldSuffix
  • fktHintStart
  • fktHintEnd
  • fktError

fktFieldSuffix replaces the default clear and dropdown action button.

For the complete field contract, see Field documentation.

Templates

The following structural directives customize rendering:

  • fktSelectHeader
  • fktSelectGroup
  • fktSelectItem
  • fktSelectFooter
  • fktSelectChip
  • fktSelectEmpty

Templates change presentation only. The Select continues to own keyboard navigation, active descendant, selection state, accessibility, and form integration.

Lazy Fetching

Use dropdownOpenChange when the finite option list should only be fetched after the user opens the dropdown:

<fkt-select
    [options]="options()"
    (dropdownOpenChange)="$event && fetchOptions()"
/>

The output reports both opening and closing transitions. It observes the dropdown lifecycle; opening, closing, focus, keyboard behavior, and selection remain managed by the Select.

Select is designed for finite option sets. Use Autocomplete when the user needs search, server queries, infinite loading, or virtualized results.