Spartans get ready! v1 is coming!

We are very close to our first stable release. Expect more announcements in the coming weeks. v1 was made possible by our partner Zerops.

Select

Select a value from a list of options.

import { Component } from '@angular/core';
import { BrnSelectImports } from '@spartan-ng/brain/select';
import { HlmSelectImports } from '@spartan-ng/helm/select';

@Component({
	selector: 'spartan-select-preview',
	imports: [BrnSelectImports, HlmSelectImports],
	template: `
		<brn-select class="inline-block" placeholder="Select an option">
			<hlm-select-trigger class="w-56">
				<hlm-select-value />
			</hlm-select-trigger>
			<hlm-select-content>
				<hlm-option value="Refresh">Refresh</hlm-option>
				<hlm-option value="Settings">Settings</hlm-option>
				<hlm-option value="Help">Help</hlm-option>
				<hlm-option value="Signout">Sign out</hlm-option>
			</hlm-select-content>
		</brn-select>
	`,
})
export class SelectPreview {}

About

Select is built with the help of ListKeyManager and Overlay from Material CDK .

Installation

npx nx g @spartan-ng/cli:ui select

Usage

import { Component } from '@angular/core';
import { BrnSelectImports } from '@spartan-ng/brain/select';
import { HlmSelectImports } from '@spartan-ng/helm/select';

<brn-select class="inline-block" placeholder="Select an option">
	<hlm-select-trigger>
		<hlm-select-value />
	</hlm-select-trigger>
	<hlm-select-content class="w-56">
			<hlm-option value="Refresh">Refresh</hlm-option>
			<hlm-option value="Settings">Settings</hlm-option>
			<hlm-option value="Help">Help</hlm-option>
			<hlm-option value="Signout">Sign out</hlm-option>
	</hlm-select-content>
</brn-select>

@import '@angular/cdk/overlay-prebuilt.css';

Examples

Multiple

import { Component } from '@angular/core';
import { provideIcons } from '@ng-icons/core';
import { lucideChevronDown, lucideChevronUp } from '@ng-icons/lucide';
import { BrnSelectImports } from '@spartan-ng/brain/select';
import { HlmSelectImports } from '@spartan-ng/helm/select';

@Component({
	selector: 'spartan-select-multiple-preview',
	imports: [BrnSelectImports, HlmSelectImports],
	providers: [provideIcons({ lucideChevronUp, lucideChevronDown })],
	template: `
		<brn-select class="inline-block" placeholder="Select some fruit" [multiple]="true">
			<hlm-select-trigger class="w-56">
				<hlm-select-value />
			</hlm-select-trigger>
			<hlm-select-content>
				<hlm-option value="Apples">Apples</hlm-option>
				<hlm-option value="Bananas">Bananas</hlm-option>
				<hlm-option value="Pears">Pears</hlm-option>
				<hlm-option value="Strawberries">Strawberries</hlm-option>
			</hlm-select-content>
		</brn-select>
	`,
})
export class SelectMultiplePreview {}

Scrollable with Groups

import { Component } from '@angular/core';
import { BrnSelectImports } from '@spartan-ng/brain/select';
import { HlmSelectImports } from '@spartan-ng/helm/select';

@Component({
	selector: 'spartan-select-scrollable-preview',
	imports: [BrnSelectImports, HlmSelectImports],
	template: `
		<hlm-select scrollable="true" placeholder="Select a timezone">
			<hlm-select-trigger class="w-[280px]">
				<hlm-select-value />
			</hlm-select-trigger>
			<hlm-select-content class="max-h-96 min-w-[325px]">
				<hlm-select-scroll-up />

				<hlm-select-group>
					<hlm-select-label>North America</hlm-select-label>
					<hlm-option value="est">Eastern Standard Time (EST)</hlm-option>
					<hlm-option value="cst">Central Standard Time (CST)</hlm-option>
					<hlm-option value="mst">Mountain Standard Time (MST)</hlm-option>
					<hlm-option value="pst">Pacific Standard Time (PST)</hlm-option>
					<hlm-option value="akst">Alaska Standard Time (AKST)</hlm-option>
					<hlm-option value="hst">Hawaii Standard Time (HST)</hlm-option>
				</hlm-select-group>

				<hlm-select-group>
					<hlm-select-label>Europe & Africa</hlm-select-label>
					<hlm-option value="gmt">Greenwich Mean Time (GMT)</hlm-option>
					<hlm-option value="cet">Central European Time (CET)</hlm-option>
					<hlm-option value="eet">Eastern European Time (EET)</hlm-option>
					<hlm-option value="west">Western European Summer Time (WEST)</hlm-option>
					<hlm-option value="cat">Central Africa Time (CAT)</hlm-option>
					<hlm-option value="eat">East Africa Time (EAT)</hlm-option>
				</hlm-select-group>

				<hlm-select-group>
					<hlm-select-label>Asia</hlm-select-label>
					<hlm-option value="msk">Moscow Time (MSK)</hlm-option>
					<hlm-option value="ist">India Standard Time (IST)</hlm-option>
					<hlm-option value="cst_china">China Standard Time (CST)</hlm-option>
					<hlm-option value="jst">Japan Standard Time (JST)</hlm-option>
					<hlm-option value="kst">Korea Standard Time (KST)</hlm-option>
					<hlm-option value="ist_indonesia">Indonesia Central Standard Time (WITA)</hlm-option>
				</hlm-select-group>

				<hlm-select-group>
					<hlm-select-label>Australia & Pacific</hlm-select-label>
					<hlm-option value="awst">Australian Western Standard Time (AWST)</hlm-option>
					<hlm-option value="acst">Australian Central Standard Time (ACST)</hlm-option>
					<hlm-option value="aest">Australian Eastern Standard Time (AEST)</hlm-option>
					<hlm-option value="nzst">New Zealand Standard Time (NZST)</hlm-option>
					<hlm-option value="fjt">Fiji Time (FJT)</hlm-option>
				</hlm-select-group>

				<hlm-select-group>
					<hlm-select-label>South America</hlm-select-label>
					<hlm-option value="art">Argentina Time (ART)</hlm-option>
					<hlm-option value="bot">Bolivia Time (BOT)</hlm-option>
					<hlm-option value="brt">Brasilia Time (BRT)</hlm-option>
					<hlm-option value="clt">Chile Standard Time (CLT)</hlm-option>
				</hlm-select-group>

				<hlm-select-scroll-down />
			</hlm-select-content>
		</hlm-select>
	`,
})
export class SelectScrollablePreview {}

Value Template

import { Component } from '@angular/core';
import { NgIcon, provideIcons } from '@ng-icons/core';
import {
	lucideAlignCenter,
	lucideAlignJustify,
	lucideAlignLeft,
	lucideAlignRight,
	lucideChevronDown,
	lucideChevronUp,
} from '@ng-icons/lucide';
import { BrnSelectImports } from '@spartan-ng/brain/select';
import { HlmSelectImports } from '@spartan-ng/helm/select';

@Component({
	selector: 'spartan-select-value-template-preview',
	imports: [BrnSelectImports, HlmSelectImports, NgIcon],
	providers: [
		provideIcons({
			lucideChevronUp,
			lucideChevronDown,
			lucideAlignLeft,
			lucideAlignCenter,
			lucideAlignJustify,
			lucideAlignRight,
		}),
	],
	template: `
		<brn-select class="inline-block" placeholder="Select an alignment">
			<hlm-select-trigger class="w-56">
				<hlm-select-value>
					<div class="flex items-center gap-x-2" *brnSelectValue="let value">
						<ng-icon [name]="value.icon" />
						{{ value.label }}
					</div>
				</hlm-select-value>
			</hlm-select-trigger>
			<hlm-select-content>
				@for (option of options; track option.label) {
					<hlm-option [value]="option">
						<ng-icon [name]="option.icon" class="mr-2" />
						{{ option.label }}
					</hlm-option>
				}
			</hlm-select-content>
		</brn-select>
	`,
})
export class SelectValueTemplatePreview {
	public readonly options = [
		{ label: 'Align Left', icon: 'lucideAlignLeft' },
		{ label: 'Align Center', icon: 'lucideAlignCenter' },
		{ label: 'Align Justify', icon: 'lucideAlignJustify' },
		{ label: 'Align Right', icon: 'lucideAlignRight' },
	];
}

Brain API

BrnSelectScrollUp

Selector: [brnSelectScrollUp], brn-select-scroll-up, hlm-select-scroll-up:not(noHlm)

BrnSelectScrollDown

Selector: [brnSelectScrollDown], brn-select-scroll-down, hlm-select-scroll-down:not(noHlm)

BrnSelectContent

Selector: brn-select-content, hlm-select-content:not(noHlm)

BrnSelectGroup

Selector: [brnSelectGroup]

BrnSelectLabel

Selector: [brnSelectLabel]

BrnSelectOption

Selector: [brnOption]

Inputs

Prop	Type	Default	Description
id	unknown	`brn-option-${++nextId}`	-
value	T	-	-
disabled	boolean	false	-

BrnSelectPlaceholder

Selector: [brnSelectPlaceholder], [hlmSelectPlaceholder]

BrnSelectTrigger

Selector: [brnSelectTrigger]

BrnSelectValueTemplate

Selector: [brnSelectValue], [hlmSelectValue]

BrnSelectValue

Selector: brn-select-value, hlm-select-value

Inputs

Prop	Type	Default	Description
transformFn	(values: (string \| undefined)[]) => any	,	-

BrnSelect

Selector: brn-select, hlm-select

Inputs

Prop	Type	Default	Description
id	string	`brn-select-${++nextId}`	-
multiple	boolean	false	-
placeholder	string	-	-
disabled	boolean	false	-
dir	BrnReadDirection	ltr	-
closeDelay	number	100	-
compareWith	(o1: T, o2: T) => boolean	(o1, o2) => o1 === o2	-
open	boolean	false	-
value	T \| T[]	-	-

Outputs

Prop	Type	Default	Description
valueChange	T \| T[]	-	-
openChanged	boolean	false	-
valueChanged	T \| T[]	-	-

Helm API

HlmSelectContent

Selector: [hlmSelectContent], hlm-select-content

Inputs

Prop	Type	Default	Description
class	ClassValue	-	-
stickyLabels	boolean	false	-

HlmSelectGroup

Selector: [hlmSelectGroup], hlm-select-group

Inputs

Prop	Type	Default	Description
class	ClassValue	-	-

HlmSelectLabel

Selector: [hlmSelectLabel], hlm-select-label

Inputs

Prop	Type	Default	Description
class	ClassValue	-	-

HlmSelectOption

Selector: hlm-option

Inputs

Prop	Type	Default	Description
class	ClassValue	-	-

HlmSelectScrollDown

Selector: hlm-select-scroll-down

Inputs

Prop	Type	Default	Description
class	ClassValue	-	-

HlmSelectScrollUp

Selector: hlm-select-scroll-up

Inputs

Prop	Type	Default	Description
class	ClassValue	-	-

HlmSelectTrigger

Selector: hlm-select-trigger

Inputs

Prop	Type	Default	Description
class	ClassValue	-	-
size	'default' \| 'sm'	default	-

HlmSelectValue

Selector: hlm-select-value,[hlmSelectValue], brn-select-value[hlm]

Inputs

Prop	Type	Default	Description
class	ClassValue	-	-

HlmSelect

Selector: hlm-select, brn-select [hlm]

Inputs

Prop	Type	Default	Description
class	ClassValue	-	-

Separator

Scroll Area