AngularLynx

    Select

    A field that opens a bottom sheet of options and shows the one the user picks.

    ui-selectsrc/app/app.ts

    Installation

    npx @blotch/dolan add select
    import { UiSelect, UiSelectItem } from '../components/ui/select';

    This also adds Bottom Sheet, which holds the options.

    Usage

    src/app/app.ts
    import { Component, signal } from '@angular/core';
import { UiSelect, UiSelectItem } from '../components/ui/select';

@Component({
  selector: 'app-root',
  imports: [UiSelect, UiSelectItem],
  template: `
    <ui-select placeholder="Pick a country" [(value)]="country">
      <ui-select-item value="us" label="United States" />
      <ui-select-item value="uk" label="United Kingdom" />
      <ui-select-item value="jp" label="Japan" />
    </ui-select>
  `,
})
export class App {
  protected readonly country = signal('');
}
    • Tapping the field opens the sheet. Tapping an item selects it and closes the sheet.
    • Tapping the dimmed backdrop, or dragging the sheet's handle down, closes it without a change.
    • The field shows the selected item's label, or placeholder when nothing is selected. The selected item has a check mark.
    • The list scrolls once it's taller than 300 pixels.

    With a label

    <view class="flex flex-col gap-2">
  <ui-label>Country</ui-label>
  <ui-select [(value)]="country">…</ui-select>
</view>

    See Label.

    Disabled

    <ui-select value="admin" [disabled]="true">
  <ui-select-item value="admin" label="Administrator" />
  <ui-select-item value="viewer" label="Viewer" />
</ui-select>

    A disabled select dims and doesn't open.

    Open from code

    UiSelect has public open(), close() and toggle() methods. Get it with viewChild(UiSelect) and call them from a handler. open() and toggle() do nothing while disabled.

    API

    UiSelect

    InputTypeDefaultDescription
    valuestring''The selected item's value. Supports [(value)].
    placeholderstring'Select...'Shown in the field while nothing is selected.
    disabledbooleanfalseDims the field and stops it from opening.
    classstring''Extra Tailwind classes for the field.
    OutputTypeDescription
    changedstringEmits the value of the item the user tapped.
    valueChangestringEmits the new value, for [(value)].

    UiSelectItem

    InputTypeDefaultDescription
    valuestringRequiredThe value this item selects.
    labelstringRequiredThe text shown in the list and in the field.
    classstring''Extra Tailwind classes for the item's row.

    No outputs.