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.
- Accordion
- Alert
- Alert Dialog
- Aspect Ratio
- Autocomplete
- Avatar
- Badge
- Breadcrumb
- Button
- Button Group
- Calendar
- Card
- Carousel
- Checkbox
- Collapsible
- Combobox
- Command
- Context Menu
- Data Table
- Date Picker
- Dialog
- Dropdown Menu
- Empty
- Form Field
- Hover Card
- Icon
- Input Group
- Input OTP
- Input
- Item
- Kbd
- Label
- Menubar
- Pagination
- Popover
- Progress
- Radio Group
- Resizable
- Scroll Area
- Select
- Separator
- Sheet
- Sidebar
- Skeleton
- Slider
- Sonner (Toast)
- Spinner
- Switch
- Table
- Tabs
- Textarea
- Toggle
- Toggle Group
- Tooltip
Input Group
A flexible input group that combines inputs with addons, prefixes, and suffixes to improve usability.
import { Component } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms';
import { NgIcon, provideIcons } from '@ng-icons/core';
import { lucideArrowUp, lucideCheck, lucideInfo, lucidePlus, lucideSearch, lucideSend } from '@ng-icons/lucide';
import { HlmIcon } from '@spartan-ng/helm/icon';
import { HlmInputGroupImports } from '@spartan-ng/helm/input-group';
import { HlmSeparatorImports } from '@spartan-ng/helm/separator';
import { HlmTooltipImports } from '@spartan-ng/helm/tooltip';
@Component({
selector: 'spartan-input-group-preview',
imports: [HlmInputGroupImports, HlmIcon, NgIcon, HlmSeparatorImports, HlmTooltipImports, ReactiveFormsModule],
providers: [provideIcons({ lucideSend, lucideSearch, lucideInfo, lucidePlus, lucideArrowUp, lucideCheck })],
host: {
class: 'grid w-full max-w-sm gap-6',
},
template: `
<div hlmInputGroup>
<input hlmInputGroupInput placeholder="Search..." />
<div hlmInputGroupAddon>
<ng-icon hlm name="lucideSearch" />
</div>
<div hlmInputGroupAddon align="inline-end">12 results</div>
</div>
<div hlmInputGroup>
<input hlmInputGroupInput placeholder="example.com" class="!pl-1" />
<div hlmInputGroupAddon>
<span hlmInputGroupText>https://</span>
</div>
<div hlmInputGroupAddon align="inline-end">
<button
hlmInputGroupButton
class="rounded-full"
size="icon-xs"
[hlmTooltipTrigger]="'This is content in a tooltip.'"
>
<ng-icon hlm name="lucideInfo" />
</button>
</div>
</div>
<div hlmInputGroup>
<textarea hlmInputGroupTextarea placeholder="Ask, Search or Chat..."></textarea>
<div hlmInputGroupAddon align="block-end">
<button hlmInputGroupButton variant="outline" class="rounded-full" size="icon-xs">
<ng-icon hlm name="lucidePlus" />
</button>
<span hlmInputGroupText class="ml-auto">52% used</span>
<hlm-separator orientation="vertical" class="!h-4" />
<button hlmInputGroupButton variant="default" class="rounded-full" size="icon-xs" disabled>
<ng-icon hlm name="lucideArrowUp" />
<span class="sr-only">Send</span>
</button>
</div>
</div>
<div hlmInputGroup>
<input hlmInputGroupInput placeholder="@spartan" />
<div hlmInputGroupAddon align="inline-end">
<div class="bg-primary text-primary-foreground flex size-4 items-center justify-center rounded-full">
<ng-icon hlm name="lucideCheck" size="xs" />
</div>
</div>
</div>
`,
})
export class InputGroupPreview {}Installation
npx nx g @spartan-ng/cli:ui input-group
ng g @spartan-ng/cli:ui input-group
Usage
import { HlmInputGroupImports } from '@spartan-ng/helm/input-group';<div hlmInputGroup>
<input hlmInputGroupInput placeholder="Search..." />
<div hlmInputGroupAddon>
<ng-icon hlm name="lucideSearch" />
</div>
<div hlmInputGroupAddon align="inline-end">12 results</div>
</div>Examples
Icons
import { Component } from '@angular/core';
import { NgIcon, provideIcons } from '@ng-icons/core';
import { lucideCheck, lucideCreditCard, lucideInfo, lucideMail, lucideSearch, lucideStar } from '@ng-icons/lucide';
import { HlmIconImports } from '@spartan-ng/helm/icon';
import { HlmInputGroupImports } from '@spartan-ng/helm/input-group';
@Component({
selector: 'spartan-input-group-icon-preview',
imports: [HlmInputGroupImports, NgIcon, HlmIconImports],
providers: [provideIcons({ lucideSearch, lucideMail, lucideCheck, lucideCreditCard, lucideStar, lucideInfo })],
host: {
class: 'grid w-full max-w-sm gap-6',
},
template: `
<div hlmInputGroup>
<input hlmInputGroupInput placeholder="Search..." />
<div hlmInputGroupAddon>
<ng-icon hlm name="lucideSearch" />
</div>
</div>
<div hlmInputGroup>
<input hlmInputGroupInput type="email" placeholder="Enter your email" />
<div hlmInputGroupAddon>
<ng-icon hlm name="lucideMail" />
</div>
</div>
<div hlmInputGroup>
<input hlmInputGroupInput placeholder="Card number" />
<div hlmInputGroupAddon>
<ng-icon hlm name="lucideCreditCard" />
</div>
<div hlmInputGroupAddon align="inline-end">
<ng-icon hlm name="lucideCheck" />
</div>
</div>
<div hlmInputGroup>
<input hlmInputGroupInput placeholder="Card number" />
<div hlmInputGroupAddon align="inline-end">
<ng-icon hlm name="lucideStar" />
<ng-icon hlm name="lucideInfo" />
</div>
</div>
`,
})
export class InputGroupIconPreview {}Text
Display additional text information alongside inputs.
import { Component } from '@angular/core';
import { NgIcon, provideIcons } from '@ng-icons/core';
import { lucideCheck, lucideCreditCard, lucideInfo, lucideMail, lucideSearch, lucideStar } from '@ng-icons/lucide';
import { HlmIconImports } from '@spartan-ng/helm/icon';
import { HlmInputGroupImports } from '@spartan-ng/helm/input-group';
@Component({
selector: 'spartan-input-group-icon-preview',
imports: [HlmInputGroupImports, NgIcon, HlmIconImports],
providers: [provideIcons({ lucideSearch, lucideMail, lucideCheck, lucideCreditCard, lucideStar, lucideInfo })],
host: {
class: 'grid w-full max-w-sm gap-6',
},
template: `
<div hlmInputGroup>
<input hlmInputGroupInput placeholder="Search..." />
<div hlmInputGroupAddon>
<ng-icon hlm name="lucideSearch" />
</div>
</div>
<div hlmInputGroup>
<input hlmInputGroupInput type="email" placeholder="Enter your email" />
<div hlmInputGroupAddon>
<ng-icon hlm name="lucideMail" />
</div>
</div>
<div hlmInputGroup>
<input hlmInputGroupInput placeholder="Card number" />
<div hlmInputGroupAddon>
<ng-icon hlm name="lucideCreditCard" />
</div>
<div hlmInputGroupAddon align="inline-end">
<ng-icon hlm name="lucideCheck" />
</div>
</div>
<div hlmInputGroup>
<input hlmInputGroupInput placeholder="Card number" />
<div hlmInputGroupAddon align="inline-end">
<ng-icon hlm name="lucideStar" />
<ng-icon hlm name="lucideInfo" />
</div>
</div>
`,
})
export class InputGroupIconPreview {}Buttons
Add buttons to perform actions within the input group.
import { Component, computed, signal } from '@angular/core';
import { provideIcons } from '@ng-icons/core';
import { HlmInputGroupImports } from '@spartan-ng/helm/input-group';
import { tablerCheck, tablerCopy, tablerInfoCircle, tablerStar } from '@ng-icons/tabler-icons';
import { BrnPopoverImports } from '@spartan-ng/brain/popover';
import { HlmIconImports } from '@spartan-ng/helm/icon';
import { HlmPopoverImports } from '@spartan-ng/helm/popover';
@Component({
selector: 'spartan-input-group-button-preview',
imports: [HlmInputGroupImports, HlmIconImports, BrnPopoverImports, HlmPopoverImports],
providers: [provideIcons({ tablerCheck, tablerCopy, tablerInfoCircle, tablerStar })],
host: {
class: 'grid w-full max-w-sm gap-6',
},
template: `
<div hlmInputGroup>
<input hlmInputGroupInput placeholder="https://github.com/spartan-ng/spartan" readOnly />
<div hlmInputGroupAddon align="inline-end">
<button
hlmInputGroupButton
aria-label="Copy"
title="Copy"
size="icon-xs"
(click)="_copy('https://github.com/spartan-ng/spartan')"
>
<ng-icon hlm [name]="_isCopied() ? 'tablerCheck' : 'tablerCopy'" />
</button>
</div>
</div>
<div hlmInputGroup class="[--radius:9999px]">
<div hlmInputGroupAddon>
<button
hlmInputGroupButton
variant="secondary"
size="icon-xs"
brnPopoverTrigger
[brnPopoverTriggerFor]="brnPopover"
>
<ng-icon hlm name="tablerInfoCircle" />
</button>
</div>
<div hlmInputGroupAddon class="text-muted-foreground pl-1.5">https://</div>
<input hlmInputGroupInput id="input-secure-19" />
<div hlmInputGroupAddon align="inline-end">
<button hlmInputGroupButton size="icon-xs" (click)="_toggleFavorite()">
<ng-icon hlm name="tablerStar" [class]="_favoriteClass()" />
</button>
</div>
</div>
<div hlmInputGroup>
<input hlmInputGroupInput placeholder="Type to search..." />
<div hlmInputGroupAddon align="inline-end">
<button hlmInputGroupButton variant="secondary">Search</button>
</div>
</div>
<brn-popover sideOffset="5" #brnPopover>
<div hlmPopoverContent class="flex flex-col gap-1 rounded-xl text-sm" *brnPopoverContent="let ctx">
<p class="font-medium">Your connection is not secure.</p>
<p>You should not enter any sensitive information on this site.</p>
</div>
</brn-popover>
`,
})
export class InputGroupButtonPreview {
protected readonly _isCopied = signal(false);
protected readonly _isFavorite = signal(false);
protected readonly _favoriteClass = computed(() =>
this._isFavorite() ? '[&>svg]:fill-blue-600 [&>svg]:stroke-blue-600' : '',
);
protected _copy(text: string) {
void navigator.clipboard.writeText(text);
this._isCopied.set(true);
setTimeout(() => {
this._isCopied.set(false);
}, 3000);
}
protected _toggleFavorite(): void {
this._isFavorite.update((f) => !f);
}
}Tooltip
Add tooltips to provide additional context or help.
import { Component } from '@angular/core';
import { provideIcons } from '@ng-icons/core';
import { lucideHelpCircle, lucideInfo } from '@ng-icons/lucide';
import { HlmIconImports } from '@spartan-ng/helm/icon';
import { HlmInputGroupImports } from '@spartan-ng/helm/input-group';
import { HlmTooltipImports } from '@spartan-ng/helm/tooltip';
@Component({
selector: 'spartan-input-group-tooltip-preview',
providers: [
provideIcons({
lucideInfo,
lucideHelpCircle,
}),
],
imports: [HlmInputGroupImports, HlmTooltipImports, HlmIconImports],
host: {
class: 'grid w-full max-w-sm gap-6',
},
template: `
<div hlmInputGroup>
<input hlmInputGroupInput placeholder="Enter password" type="password" />
<div hlmInputGroupAddon align="inline-end">
<button
hlmInputGroupButton
hlmTooltipTrigger="Password must be at least 8 characters"
variant="ghost"
aria-label="Info"
size="icon-xs"
>
<ng-icon hlm name="lucideInfo" />
</button>
</div>
</div>
<div hlmInputGroup>
<input hlmInputGroupInput placeholder="Your email address" />
<div hlmInputGroupAddon align="inline-end">
<button
hlmInputGroupButton
hlmTooltipTrigger="We'll use this to send you notifications"
variant="ghost"
aria-label="Info"
size="icon-xs"
>
<ng-icon hlm name="lucideHelpCircle" />
</button>
</div>
</div>
<div hlmInputGroup>
<input hlmInputGroupInput placeholder="Enter API key" />
<div hlmInputGroupAddon>
<button
hlmInputGroupButton
hlmTooltipTrigger="Click for help with API keys"
position="left"
variant="ghost"
aria-label="Info"
size="icon-xs"
>
<ng-icon hlm name="lucideHelpCircle" />
</button>
</div>
</div>
`,
})
export class InputGroupTooltipPreview {}Textarea
Input groups also work with textarea components. Use block-start or block-end for alignment.
import { Component } from '@angular/core';
import { provideIcons } from '@ng-icons/core';
import { HlmInputGroupImports } from '@spartan-ng/helm/input-group';
import { tablerBrandJavascript, tablerCopy, tablerCornerDownLeft, tablerRefresh } from '@ng-icons/tabler-icons';
import { HlmIconImports } from '@spartan-ng/helm/icon';
@Component({
selector: 'spartan-input-group-textarea-preview',
imports: [HlmInputGroupImports, HlmIconImports],
providers: [
provideIcons({
tablerBrandJavascript,
tablerCopy,
tablerCornerDownLeft,
tablerRefresh,
}),
],
host: {
class: 'grid w-full max-w-sm gap-6',
},
template: `
<div hlmInputGroup>
<textarea
hlmInputGroupTextarea
id="textarea-code-32"
placeholder="console.log('Hello, world!');"
class="min-h-[200px]"
></textarea>
<div hlmInputGroupAddon align="block-end" class="border-t">
<span hlmInputGroupText>Line 1, Column 1</span>
<button hlmInputGroupButton size="sm" class="ml-auto" variant="default">
Run
<ng-icon hlm name="tablerCornerDownLeft" />
</button>
</div>
<div hlmInputGroupAddon align="block-start" class="border-b">
<span hlmInputGroupText class="font-mono font-medium">
<ng-icon hlm name="tablerBrandJavascript" />
script.js
</span>
<button hlmInputGroupButton class="ml-auto" size="icon-xs">
<ng-icon hlm name="tablerRefresh" />
</button>
<button hlmInputGroupButton variant="ghost" size="icon-xs">
<ng-icon hlm name="tablerCopy" />
</button>
</div>
</div>
`,
})
export class InputGroupTextareaPreview {}Spinner
Show loading indicators while processing input.
import { Component } from '@angular/core';
import { NgIcon, provideIcons } from '@ng-icons/core';
import { lucideLoader, lucideLoader2 } from '@ng-icons/lucide';
import { HlmIconImports } from '@spartan-ng/helm/icon';
import { HlmInputGroupImports } from '@spartan-ng/helm/input-group';
@Component({
selector: 'spartan-input-group-spinner-preview',
imports: [HlmInputGroupImports, NgIcon, HlmIconImports],
providers: [provideIcons({ lucideLoader, lucideLoader2 })],
host: {
class: 'grid w-full max-w-sm gap-6',
},
template: `
<div hlmInputGroup data-disabled="true">
<input hlmInputGroupInput placeholder="Searching..." disabled />
<div hlmInputGroupAddon align="inline-end">
<ng-icon name="lucideLoader2" class="animate-spin" />
</div>
</div>
<div hlmInputGroup data-disabled="true">
<input hlmInputGroupInput placeholder="Processing..." disabled />
<div hlmInputGroupAddon>
<ng-icon name="lucideLoader2" class="animate-spin" />
</div>
</div>
<div hlmInputGroup data-disabled="true">
<input hlmInputGroupInput placeholder="Saving changes..." disabled />
<div hlmInputGroupAddon align="inline-end">
<span hlmInputGroupText>Saving...</span>
<ng-icon name="lucideLoader2" class="animate-spin" />
</div>
</div>
<div hlmInputGroup data-disabled="true">
<input hlmInputGroupInput placeholder="Refreshing data..." disabled />
<div hlmInputGroupAddon>
<ng-icon hlm name="lucideLoader" class="animate-spin" />
</div>
<div hlmInputGroupAddon align="inline-end">
<span hlmInputGroupText class="text-muted-foreground">Please wait...</span>
</div>
</div>
`,
})
export class InputGroupSpinnerPreview {}Label
Add labels within input groups to improve accessibility.
import { Component } from '@angular/core';
import { provideIcons } from '@ng-icons/core';
import { lucideInfo } from '@ng-icons/lucide';
import { HlmIconImports } from '@spartan-ng/helm/icon';
import { HlmInputGroupImports } from '@spartan-ng/helm/input-group';
import { HlmLabelImports } from '@spartan-ng/helm/label';
import { HlmTooltipImports } from '@spartan-ng/helm/tooltip';
@Component({
selector: 'spartan-input-group-label-preview',
imports: [HlmInputGroupImports, HlmIconImports, HlmTooltipImports, HlmLabelImports],
providers: [
provideIcons({
lucideInfo,
}),
],
host: {
class: 'grid w-full max-w-sm gap-6',
},
template: `
<div hlmInputGroup>
<input hlmInputGroupInput id="email" placeholder="spartan" />
<div hlmInputGroupAddon>
<label for="email" hlmLabel>@</label>
</div>
</div>
<div hlmInputGroup>
<input hlmInputGroupInput id="email-2" placeholder="spartan-ng@github.com" />
<div hlmInputGroupAddon align="block-start">
<label for="email-2" class="text-foreground" hlmLabel>Email</label>
<button
hlmInputGroupButton
hlmTooltipTrigger="We'll use this to send you notifications"
variant="ghost"
aria-label="Help"
class="ml-auto rounded-full"
size="icon-xs"
>
<ng-icon hlm name="lucideInfo" />
</button>
</div>
</div>
`,
})
export class InputGroupLabelPreview {}Dropdown
Pair input groups with dropdown menus for complex interactions.
import { Component } from '@angular/core';
import { provideIcons } from '@ng-icons/core';
import { lucideChevronDown, lucideMoreHorizontal } from '@ng-icons/lucide';
import { BrnMenuImports } from '@spartan-ng/brain/menu';
import { HlmIconImports } from '@spartan-ng/helm/icon';
import { HlmInputGroupImports } from '@spartan-ng/helm/input-group';
import { HlmMenuImports } from '@spartan-ng/helm/menu';
@Component({
selector: 'spartan-input-group-dropdown-preview',
imports: [HlmInputGroupImports, HlmIconImports, BrnMenuImports, HlmMenuImports],
providers: [
provideIcons({
lucideMoreHorizontal,
lucideChevronDown,
}),
],
host: {
class: 'grid w-full max-w-sm gap-6',
},
template: `
<div hlmInputGroup>
<input hlmInputGroupInput placeholder="Enter file name" />
<div hlmInputGroupAddon align="inline-end">
<button
hlmInputGroupButton
variant="ghost"
aria-label="More"
size="icon-xs"
[brnMenuTriggerFor]="fileMenu"
align="end"
>
<ng-icon hlm name="lucideMoreHorizontal" />
</button>
</div>
</div>
<div hlmInputGroup class="[--radius:1rem]">
<input hlmInputGroupInput placeholder="Enter search query" />
<div hlmInputGroupAddon align="inline-end">
<button
hlmInputGroupButton
variant="ghost"
class="!pr-1.5 text-xs"
[brnMenuTriggerFor]="searchMenu"
align="end"
>
Search In...
<ng-icon hlm name="lucideChevronDown" />
</button>
</div>
</div>
<ng-template #fileMenu>
<hlm-menu class="w-48">
<button hlmMenuItem>Settings</button>
<button hlmMenuItem>Copy path</button>
<button hlmMenuItem>Open location</button>
</hlm-menu>
</ng-template>
<ng-template #searchMenu>
<hlm-menu class="w-56 [--radius:0.95rem]">
<button hlmMenuItem>Documentation</button>
<button hlmMenuItem>Blog Posts</button>
<button hlmMenuItem>Changelog</button>
</hlm-menu>
</ng-template>
`,
})
export class InputGroupDropdownPreview {}Button Group
Wrap input groups with button groups to create prefixes and suffixes.
import { Component } from '@angular/core';
import { provideIcons } from '@ng-icons/core';
import { lucideLink2 } from '@ng-icons/lucide';
import { HlmButtonGroupImports } from '@spartan-ng/helm/button-group';
import { HlmIconImports } from '@spartan-ng/helm/icon';
import { HlmInputGroupImports } from '@spartan-ng/helm/input-group';
import { HlmLabelImports } from '@spartan-ng/helm/label';
@Component({
selector: 'spartan-input-group-button-group-preview',
providers: [
provideIcons({
lucideLink2,
}),
],
imports: [HlmInputGroupImports, HlmButtonGroupImports, HlmLabelImports, HlmIconImports],
host: {
class: 'grid w-full max-w-sm gap-6',
},
template: `
<div hlmButtonGroup>
<div hlmButtonGroupText>
<label hlmLabel for="url">https://</label>
</div>
<div hlmInputGroup>
<input hlmInputGroupInput id="url" />
<div hlmInputGroupAddon align="inline-end">
<ng-icon hlm name="lucideLink2" />
</div>
</div>
<div hlmButtonGroupText>.com</div>
</div>
`,
})
export class InputGroupButtonGroupPreview {}Custom Input
Add the data-slot="input-group-control" attribute to your custom input for automatic behavior and focus state handling.
No style is applied to the custom input. Apply your own styles using the class prop.
import { CdkTextareaAutosize } from '@angular/cdk/text-field';
import { Component } from '@angular/core';
import { provideIcons } from '@ng-icons/core';
import { lucideLink2 } from '@ng-icons/lucide';
import { HlmInputGroupImports } from '@spartan-ng/helm/input-group';
@Component({
selector: 'spartan-input-group-custom-input-preview',
providers: [
provideIcons({
lucideLink2,
}),
],
imports: [HlmInputGroupImports, CdkTextareaAutosize],
host: {
class: 'grid w-full max-w-sm gap-6',
},
template: `
<div hlmInputGroup>
<textarea
data-slot="input-group-control"
placeholder="Autoresize textarea..."
cdkTextareaAutosize
class="flex min-h-16 w-full resize-none rounded-md bg-transparent px-3 py-2.5 text-base transition-[color,box-shadow] outline-none md:text-sm"
></textarea>
<div hlmInputGroupAddon align="block-end">
<button hlmInputGroupButton class="ml-auto" size="sm" variant="default">Submit</button>
</div>
</div>
`,
})
export class InputGroupCustomInputPreview {}Helm API
HlmInputGroupAddon
Selector: hlm-input-group-addon,[hlmInputGroupAddon]
Inputs
| Prop | Type | Default | Description |
|---|---|---|---|
| align | InputGroupAddonVariants['align'] | inline-start | - |
| class | ClassValue | - | - |
HlmInputGroupButton
Selector: button[hlmInputGroupButton]
Inputs
| Prop | Type | Default | Description |
|---|---|---|---|
| size | InputGroupAddonVariants['size'] | xs | - |
| class | ClassValue | - | - |
HlmInputGroupInput
Selector: input[hlmInputGroupInput]
Inputs
| Prop | Type | Default | Description |
|---|---|---|---|
| class | ClassValue | - | - |
HlmInputGroupText
Selector: span[hlmInputGroupText]
Inputs
| Prop | Type | Default | Description |
|---|---|---|---|
| class | ClassValue | - | - |
HlmInputGroupTextarea
Selector: textarea[hlmInputGroupTextarea]
Inputs
| Prop | Type | Default | Description |
|---|---|---|---|
| class | ClassValue | - | - |
HlmInputGroup
Selector: [hlmInputGroup],hlm-input-group
Inputs
| Prop | Type | Default | Description |
|---|---|---|---|
| class | ClassValue | - | - |