Select

Preview

A working preview of Select in the Brickclay style. Try it.

Interactive playground

variation

Event log

Interact with the control to see emitted events.

Markup

Copy<bk-select
  label="Assignee"
  placeholder="Select assignee"
  [items]="teamMembers"
  bindLabel="label"
  bindValue="value"
  [multiple]="false"
  [searchable]="true"
  [clearable]="true"
  [openOnFocus]="false"
  [disabled]="false"
  [(ngModel)]="selectedValue">
</bk-select>

Data

CopyteamMembers = [
  { id: 1, label: 'Ali Khan', value: 'ali', color: '#2563EB', avatar: 'assets/avatars/300-1.png' },
  { id: 2, label: 'Sara Ahmed', value: 'sara', color: '#16A34A', avatar: 'assets/avatars/300-2.png' },
  { id: 3, label: 'Usman Haider', value: 'usman', color: '#D97706' },
  { id: 4, label: 'mtayyab', value: 'mtayyab', color: '#7C3AED' },
  { id: 5, label: 'Bilal Sheikh', value: 'bilal', color: '#DC2626' }
];

Grid select playground

select input variation

grid dropdown variation

Markup

Updates as you change the grid playground controls.

Copy<bk-select
  label="Equipment"
  placeholder="Select equipment"
  [items]="equipment"
  bindLabel="itemName"
  bindValue="code"
  dropdownView="grid"
  [gridColumns]="equipmentColumns"
  gridMinWidth="680px"
  [(ngModel)]="selectedValue">
</bk-select>

equipmentColumns: BkSelectGridColumn[] = [
  { key: 'code', label: 'Code', width: '22%' },
  { key: 'itemName', label: 'Item name', width: '34%' },
  { key: 'category', label: 'Category', width: '27%' },
  { key: 'price', label: 'Price', width: '17%', align: 'right' }
];

Data

Copyconst initialEquipment = [
  { code: 'TR-1001', itemName: 'Power transformer', category: 'Grid equipment', price: 4200, status: 'Active' },
  { code: 'BR-2210', itemName: 'Circuit breaker', category: 'Protection', price: 1850, status: 'Active' },
  { code: 'IS-3040', itemName: 'Isolator switch', category: 'Protection', price: 960, status: 'Pending' },
  { code: 'CT-4102', itemName: 'Current transformer', category: 'Metering', price: 720, status: 'Inactive' }
];

equipment = [
  ...initialEquipment,
  ...Array.from({ length: 124 }, (_, index) => ({
    code: `EQ-${String(index + 5001).padStart(4, '0')}`,
    itemName: `Equipment item ${index + 5}`,
    category: ['Grid equipment', 'Protection', 'Metering'][index % 3],
    price: 500 + index * 25,
    status: ['Active', 'Pending', 'Inactive'][index % 3]
  }))
];

Examples

Grid dropdown, single select, searchable

Grid mode is opt-in; the trigger, forms integration, search, selection, and clear behavior are shared with the standard select.

Grid dropdown, multi select with Apply

Checkbox changes stay pending until Apply. Closing the dropdown without applying preserves the current model. Set [allSelect]="true" to show a select-all checkbox in the grid header.

openOnFocus, opens on focus

Tab into the control (or click it) and the dropdown opens automatically, with the cursor placed in the search field. Off by default, set [openOnFocus]="true" to enable.

openOnFocus, open on focus, close on blur

Opens when focused and stays open while you pick several options (closeOnSelect=false); it closes automatically once focus leaves the control, tab away or click elsewhere.

showDots, single select

Dots beside each option, and the control is tinted with the selected option's colour. Value: "react"

showDots, multi select

No background here, one control can't carry several colours, so each chip gets its own dot. Value: [ "angular", "vue" ]

showAvatar, image or initials

Ali and Sara have a photo; the rest fall back to initials, "Usman Haider" → UH, "mtayyab" → MT. Value: "usman"

showAvatar + showDots

Only one leading visual shows at a time, the avatar wins over the dot (precedence is avatar > icon > dot). showDots still tints the control and colours the avatar. Value: "mtayyab"

showAvatar, multi select

Chips carry the avatar too. The control itself stays untinted, one background can't represent several colours. Value: [ "ali", "mtayyab" ]

Single Select

Change Event emission :

Clear Event emission :

Multi Select With Search

Search Objects: null

Multi Select, many selected (overflow tooltip)

Hover the +N badge to see the remaining selections, the tooltip is capped and scrollable instead of growing past the viewport. Then click the control to open the panel while still hovering: the tooltip is dismissed immediately instead of stacking on top of the panel.