Select
A dropdown selection component that provides a clean and accessible interface for choosing options. Built with Angular signals and reactive forms, it offers a styled alternative to native select elements with enhanced functionality and consistent design.
Import
import {FktSelectComponent} from "frakton-ng/select";Basic select
A basic select dropdown with a few options. Click to open the dropdown and select an option.
Selected Value: {{ control().value() || 'None' }}
Pre selected option
A select with a pre-selected value. The control is initialized with a default selection showing the selected option.
Pre-selected Country: {{ selectedLabel() }}
Large options list
A select with many options showing the scrollable dropdown behavior when there are too many options to fit.
Scrollable dropdown with 50 options
Selected: None
Scrollable dropdown with {{ options().length }} options
Selected: {{ control().value() || 'None' }}
Loading state
A select showing loading state. This is useful when options are being fetched from an API.
Loading State: Loading options...
Loading State: {{ loading() ? 'Loading options...' : 'Ready' }}
Empty state
A select with no options showing a custom 'no results' message.
Click the dropdown to see the custom "no results" message
With validation
A select with required validation. The field shows error state when no option is selected.
Validation Status: Invalid - Priority is required
Validation Status:
{{ control().valid() ? 'Valid ✓' : 'Invalid - Priority is required' }}
Touch field and click outside to Show Error
Disabled state
A select in disabled state. The dropdown cannot be opened and the field appears with reduced opacity.
Async loading
A select that loads options asynchronously. Options are fetched after a simulated API delay.
Status: Users loaded successfully
Click field to load users
Status:
{{ loading() ? 'Loading users from API...' : 'Users loaded successfully' }}