generated:catalog.entry.select.title
generated:catalog.entry.select.description
@xngui/components/select@xngui/components/selectchrome:demo.section
chrome:demo.preview
import { form } from '@angular/forms/signals';
import { createDataSource } from '@xngui/cdk/datasource';
import { XForm } from '@xngui/components/form';
import { XFormField } from '@xngui/components/form-field';
import { XSelect } from '@xngui/components/select';
protected readonly fruits = createDataSource({ data: FRUITS, pageSize: 10 });
private readonly model = signal({ fruit: '' });
protected readonly demoForm = form(this.model, (path) => {
syncDemoFieldAvailability(path.fruit, () => this.controlState());
});
chrome:demo.events.title
chrome:demo.events.empty
chrome:demo.api.title
x-select
chrome:demo.api.col.property
chrome:demo.api.col.type
chrome:demo.api.col.default
chrome:demo.api.col.description
dataSourceXSelectDataSource—Menu rows — XDataSource pipeline for static, remote, or paginated options.
selectionModeXSelectionMode'single'Single or multiple selection mode.
sizeXSize—Visual size tier — falls back to XConfigService when unset.
densityXDensity—Spacing offsets — orthogonal to `size`; falls back to XConfigService when unset.
placeholderstring''Placeholder text when no option is selected.
lookXFormLook—Field chrome — outline, fill, flat, or none; falls back to XForm then XConfigService.
disabledbooleanfalsePrevents interaction and sets `aria-disabled` on the trigger.
readonlybooleanfalseValue-only input — user cannot change when true.
clearablebooleanfalseShow a clear button when a value is selected.
invalidbooleanfalseMarks the control invalid for styling and ARIA.
requiredbooleanfalseMarks the control as required for validation and ARIA.
namestring''Native form control `name` attribute.
controlIdstring—Native `id` on the trigger; falls back to `name`, then a generated id.
closeOnSelectboolean—Close the menu after a pick (default: true in single, false in multiple).
placementXPlacement—Menu overlay placement relative to the trigger — falls back to XConfigService when unset.
offsetXnumber0Horizontal offset in pixels for the menu overlay.
offsetYnumber0Vertical offset in pixels for the menu overlay.
matchMenuWidthbooleantrueWhen true (default), the open menu width matches the trigger.
clearLabelstring—Accessible label for the clear button.
loadOnOpenbooleantrueLoad the datasource when the menu opens while status is `idle`.
refreshOnOpenbooleanfalseRefresh the datasource each time the menu opens.
loadingLabelstring—Text shown while the initial datasource load is in progress.
loadingMoreLabelstring—Text shown while loading additional pages.
loadMoreErrorLabelstring—Text shown when a load-more request fails.
emptyLabelstring—Text shown when the datasource returns no options.
errorLabelstring—Text shown when the initial datasource load fails.