Input Group

A flexible input group that combines inputs with addons, prefixes, and suffixes to improve usability.

12 results

import { ChangeDetectionStrategy, Component } from '@angular/core';
import { NgIcon, provideIcons } from '@ng-icons/core';
import { lucideSearch } from '@ng-icons/lucide';
import { HlmInputGroupImports } from '@spartan-ng/helm/input-group';

@Component({
	selector: 'spartan-input-group-preview',
	imports: [HlmInputGroupImports, NgIcon],
	providers: [provideIcons({ lucideSearch })],
	changeDetection: ChangeDetectionStrategy.OnPush,
	host: { class: 'max-w-sm' },
	template: `
		<hlm-input-group>
			<input hlmInputGroupInput forceInvalid placeholder="Search..." />
			<hlm-input-group-addon>
				<ng-icon name="lucideSearch" />
			</hlm-input-group-addon>
			<hlm-input-group-addon align="inline-end">12 results</hlm-input-group-addon>
		</hlm-input-group>
	`,
})
export class InputGroupPreview {}

Installation

ng g @spartan-ng/cli:ui input-group

nx g @spartan-ng/cli:ui input-group

import { DestroyRef, ElementRef, HostAttributeToken, Injector, PLATFORM_ID, effect, inject, runInInjectionContext } from '@angular/core';
import { clsx, type ClassValue } from 'clsx';
import { isPlatformBrowser } from '@angular/common';
import { twMerge } from 'tailwind-merge';

export function hlm(...inputs: ClassValue[]) {
	return twMerge(clsx(inputs));
}

// Global map to track class managers per element
const elementClassManagers = new WeakMap<HTMLElement, ElementClassManager>();
// Global mutation observer for all elements
let globalObserver: MutationObserver | null = null;
const observedElements = new Set<HTMLElement>();

interface ElementClassManager {
	element: HTMLElement;
	sources: Map<number, { classes: Set<string>; order: number }>;
	baseClasses: Set<string>;
	isUpdating: boolean;
	nextOrder: number;
	hasInitialized: boolean;
	restoreRafId: number | null;
	/** Transitions are suppressed until the first effect writes correct classes */
	transitionsSuppressed: boolean;
	/** Original inline transition value to restore after suppression (empty string = none was set) */
	previousTransition: string;
	/** Original inline transition priority to preserve !important when restoring */
	previousTransitionPriority: string;
}

let sourceCounter = 0;

/**
 * This function dynamically adds and removes classes for a given element without requiring
 * the a class binding (e.g. `[class]="..."`) which may interfere with other class bindings.
 *
 * 1. This will merge the existing classes on the element with the new classes.
 * 2. It will also remove any classes that were previously added by this function but are no longer present in the new classes.
 * 3. Multiple calls to this function on the same element will be merged efficiently.
 */
export function classes(computed: () => ClassValue[] | string, options: ClassesOptions = {}) {
	runInInjectionContext(options.injector ?? inject(Injector), () => {
		const elementRef = options.elementRef ?? inject(ElementRef);
		const platformId = inject(PLATFORM_ID);
		const destroyRef = inject(DestroyRef);
		const baseClasses = inject(new HostAttributeToken('class'), { optional: true });

		const element = elementRef.nativeElement;

		// Create unique identifier for this source
		const sourceId = sourceCounter++;

		// Get or create the class manager for this element
		let manager = elementClassManagers.get(element);

		if (!manager) {
			// Initialize base classes from variation (host attribute 'class')
			const initialBaseClasses = new Set<string>();

			if (baseClasses) {
				toClassList(baseClasses).forEach((cls) => initialBaseClasses.add(cls));
			}

			manager = {
				element,
				sources: new Map(),
				baseClasses: initialBaseClasses,
				isUpdating: false,
				nextOrder: 0,
				hasInitialized: false,
				restoreRafId: null,
				transitionsSuppressed: false,
				previousTransition: '',
				previousTransitionPriority: '',
			};
			elementClassManagers.set(element, manager);

			// Setup global observer if needed and register this element
			setupGlobalObserver(platformId);
			observedElements.add(element);

			// Suppress transitions until the first effect writes correct classes and
			// the browser has painted them. This prevents CSS transition animations
			// during hydration when classes change from SSR state to client state.
			if (isPlatformBrowser(platformId)) {
				manager.previousTransition = element.style.getPropertyValue('transition');
				manager.previousTransitionPriority = element.style.getPropertyPriority('transition');
				element.style.setProperty('transition', 'none', 'important');
				manager.transitionsSuppressed = true;
			}
		}

		// Assign order once at registration time
		const sourceOrder = manager.nextOrder++;

		function updateClasses(): void {
			// Get the new classes from the computed function
			const newClasses = toClassList(computed());

			// Update this source's classes, keeping the original order
			manager!.sources.set(sourceId, {
				classes: new Set(newClasses),
				order: sourceOrder,
			});

			// Update the element
			updateElement(manager!);

			// Re-enable transitions after the first effect writes correct classes.
			// Deferred to next animation frame so the browser paints the class change
			// with transitions disabled first, then re-enables them.
			if (manager!.transitionsSuppressed) {
				manager!.transitionsSuppressed = false;
				manager!.restoreRafId = requestAnimationFrame(() => {
					manager!.restoreRafId = null;
					restoreTransitionSuppression(manager!);
				});
			}
		}

		// Register cleanup with DestroyRef
		destroyRef.onDestroy(() => {
			if (manager!.restoreRafId !== null) {
				cancelAnimationFrame(manager!.restoreRafId);
				manager!.restoreRafId = null;
			}

			if (manager!.transitionsSuppressed) {
				manager!.transitionsSuppressed = false;
				restoreTransitionSuppression(manager!);
			}

			// Remove this source from the manager
			manager!.sources.delete(sourceId);

			// If no more sources, clean up the manager
			if (manager!.sources.size === 0) {
				cleanupManager(element);
			} else {
				// Update element without this source's classes
				updateElement(manager!);
			}
		});

		/**
		 * We need this effect to track changes to the computed classes. Ideally, we would use
		 * afterRenderEffect here, but that doesn't run in SSR contexts, so we use a standard
		 * effect which works in both browser and SSR.
		 */
		effect(updateClasses);
	});
}

function restoreTransitionSuppression(manager: ElementClassManager): void {
	const prev = manager.previousTransition;
	if (prev) {
		manager.element.style.setProperty('transition', prev, manager.previousTransitionPriority || undefined);
	} else {
		manager.element.style.removeProperty('transition');
	}
}

// eslint-disable-next-line @typescript-eslint/no-wrapper-object-types
function setupGlobalObserver(platformId: Object): void {
	if (isPlatformBrowser(platformId) && !globalObserver) {
		// Create single global observer that watches the entire document
		globalObserver = new MutationObserver((mutations) => {
			for (const mutation of mutations) {
				if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
					const element = mutation.target as HTMLElement;
					const manager = elementClassManagers.get(element);

					// Only process elements we're managing
					if (manager && observedElements.has(element)) {
						if (manager.isUpdating) continue; // Ignore changes we're making

						// Update base classes to include any externally added classes
						const currentClasses = toClassList(element.className);
						const allSourceClasses = new Set<string>();

						// Collect all classes from all sources
						for (const source of manager.sources.values()) {
							for (const className of source.classes) {
								allSourceClasses.add(className);
							}
						}

						// Any classes not from sources become new base classes
						manager.baseClasses.clear();

						for (const className of currentClasses) {
							if (!allSourceClasses.has(className)) {
								manager.baseClasses.add(className);
							}
						}

						updateElement(manager);
					}
				}
			}
		});

		// Start observing the entire document for class attribute changes
		globalObserver.observe(document, {
			attributes: true,
			attributeFilter: ['class'],
			subtree: true, // Watch all descendants
		});
	}
}

function updateElement(manager: ElementClassManager): void {
	if (manager.isUpdating) return; // Prevent recursive updates

	manager.isUpdating = true;

	// Handle initialization: capture base classes after first source registration
	if (!manager.hasInitialized && manager.sources.size > 0) {
		// Get current classes on element (may include SSR classes)
		const currentClasses = toClassList(manager.element.className);

		// Get all classes that will be applied by sources
		const allSourceClasses = new Set<string>();
		for (const source of manager.sources.values()) {
			source.classes.forEach((className) => allSourceClasses.add(className));
		}

		// Only consider classes as "base" if they're not produced by any source
		// This prevents SSR-rendered classes from being preserved as base classes
		currentClasses.forEach((className) => {
			if (!allSourceClasses.has(className)) {
				manager.baseClasses.add(className);
			}
		});

		manager.hasInitialized = true;
	}

	// Get classes from all sources, sorted by registration order (later takes precedence)
	const sortedSources = Array.from(manager.sources.entries()).sort(([, a], [, b]) => a.order - b.order);

	const allSourceClasses: string[] = [];
	for (const [, source] of sortedSources) {
		allSourceClasses.push(...source.classes);
	}

	// Combine base classes with all source classes, ensuring base classes take precedence
	const classesToApply =
		allSourceClasses.length > 0 || manager.baseClasses.size > 0
			? hlm([...allSourceClasses, ...manager.baseClasses])
			: '';

	// Apply the classes to the element
	if (manager.element.className !== classesToApply) {
		manager.element.className = classesToApply;
	}

	manager.isUpdating = false;
}

function cleanupManager(element: HTMLElement): void {
	// Remove from global tracking
	observedElements.delete(element);
	elementClassManagers.delete(element);

	// If no more elements being tracked, cleanup global observer
	if (observedElements.size === 0 && globalObserver) {
		globalObserver.disconnect();
		globalObserver = null;
	}
}

interface ClassesOptions {
	elementRef?: ElementRef<HTMLElement>;
	injector?: Injector;
}

// Cache for parsed class lists to avoid repeated string operations
const classListCache = new Map<string, string[]>();

function toClassList(className: string | ClassValue[]): string[] {
	// For simple string inputs, use cache to avoid repeated parsing
	if (typeof className === 'string' && classListCache.has(className)) {
		return classListCache.get(className)!;
	}

	const result = clsx(className)
		.split(' ')
		.filter((c) => c.length > 0);

	// Cache string results, but limit cache size to prevent memory growth
	if (typeof className === 'string' && classListCache.size < 1000) {
		classListCache.set(className, result);
	}

	return result;
}

import { Directive, input } from '@angular/core';
import { HlmButton, provideBrnButtonConfig } from '@spartan-ng/helm/button';
import { HlmInput } from '@spartan-ng/helm/input';
import { HlmTextarea } from '@spartan-ng/helm/textarea';
import { classes } from '@spartan-ng/helm/utils';
import { cva, type VariantProps } from 'class-variance-authority';

const inputGroupAddonVariants = cva(
	'text-muted-foreground h-auto gap-2 py-1.5 text-sm font-medium group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>ng-icon:not([class*=\'text-\'])]:text-[calc(var(--spacing)*4)] flex cursor-text items-center justify-center select-none',
	{
		variants: {
			align: {
				'inline-start': 'ps-2 has-[>button]:-ms-1 has-[>kbd]:ms-[-0.15rem] order-first',
				'inline-end': 'pe-2 has-[>button]:-me-1 has-[>kbd]:me-[-0.15rem] order-last',
				'block-start': 'px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2 order-first w-full justify-start',
				'block-end': 'px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2 order-last w-full justify-start',
			},
		},
		defaultVariants: {
			align: 'inline-start',
		},
	},
);

type InputGroupAddonVariants = VariantProps<typeof inputGroupAddonVariants>;

@Directive({
	selector: '[hlmInputGroupAddon],hlm-input-group-addon',
	host: {
		role: 'group',
		'data-slot': 'input-group-addon',
		'[attr.data-align]': 'align()',
	},
})
export class HlmInputGroupAddon {
	public readonly align = input<InputGroupAddonVariants['align']>('inline-start');

	constructor() {
		classes(() => inputGroupAddonVariants({ align: this.align() }));
	}
}

const inputGroupAddonVariants = cva('gap-2 text-sm flex items-center shadow-none', {
	variants: {
		size: {
			xs: 'h-6 gap-1 rounded-[calc(var(--radius)-5px)] px-1.5 [&>ng-icon:not([class*=\'text-\'])]:text-[calc(var(--spacing)*3.5)]',
			sm: '',
			'icon-xs': 'size-6 rounded-[calc(var(--radius)-5px)] p-0 has-[>ng-icon]:p-0',
			'icon-sm': 'size-8 p-0 has-[>ng-icon]:p-0',
		},
	},
	defaultVariants: {
		size: 'xs',
	},
});

type InputGroupAddonVariants = VariantProps<typeof inputGroupAddonVariants>;

@Directive({
	selector: 'button[hlmInputGroupButton]',
	providers: [
		provideBrnButtonConfig({
			variant: 'ghost',
		}),
	],
	hostDirectives: [
		{
			directive: HlmButton,
			inputs: ['variant'],
		},
	],
	host: {
		'[attr.data-size]': 'size()',
		'[type]': 'type()',
	},
})
export class HlmInputGroupButton {
	public readonly size = input<InputGroupAddonVariants['size']>('xs');
	public readonly type = input<'button' | 'submit' | 'reset'>('button');

	constructor() {
		classes(() => inputGroupAddonVariants({ size: this.size() }));
	}
}

@Directive({
	selector: 'input[hlmInputGroupInput]',
	hostDirectives: [HlmInput],
	host: { 'data-slot': 'input-group-control' },
})
export class HlmInputGroupInput {
	constructor() {
		classes(() => `rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 data-[matches-spartan-invalid=true]:ring-0 dark:bg-transparent flex-1`);
	}
}

@Directive({
	selector: '[hlmInputGroupText],hlm-input-group-text',
})
export class HlmInputGroupText {
	constructor() {
		classes(() => 'text-muted-foreground gap-2 text-sm [&_ng-icon:not([class*=\'text-\'])]:text-[calc(var(--spacing)*4)] flex items-center [&_ng-icon]:pointer-events-none');
	}
}

@Directive({
	selector: 'textarea[hlmInputGroupTextarea]',
	hostDirectives: [HlmTextarea],
	host: { 'data-slot': 'input-group-control' },
})
export class HlmInputGroupTextarea {
	constructor() {
		classes(() => 'rounded-none border-0 bg-transparent py-2 shadow-none ring-0 focus-visible:ring-0 data-[matches-spartan-invalid=true]:ring-0 dark:bg-transparent flex-1 resize-none');
	}
}

@Directive({
	selector: '[hlmInputGroup],hlm-input-group',
	host: {
		'data-slot': 'input-group',
		role: 'group',
	},
})
export class HlmInputGroup {
	constructor() {
		classes(
			() =>
				'border-input dark:bg-input/30 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][data-matches-spartan-invalid=true]]:ring-destructive/20 has-[[data-slot][data-matches-spartan-invalid=true]]:border-destructive dark:has-[[data-slot][data-matches-spartan-invalid=true]]:ring-destructive/40 h-9 rounded-md border shadow-xs transition-[color,box-shadow] in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot][data-matches-spartan-invalid=true]]:ring-3 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pe-1.5 has-[>[data-align=inline-start]]:[&>input]:ps-1.5 group/input-group relative flex w-full min-w-0 items-center outline-none has-[>textarea]:h-auto',
		);
	}
}

export const HlmInputGroupImports = [
	HlmInputGroup,
	HlmInputGroupAddon,
	HlmInputGroupButton,
	HlmInputGroupInput,
	HlmInputGroupText,
	HlmInputGroupTextarea,
] as const;

import { Directive, input } from '@angular/core';
import { HlmButton, provideBrnButtonConfig } from '@spartan-ng/helm/button';
import { HlmInput } from '@spartan-ng/helm/input';
import { HlmTextarea } from '@spartan-ng/helm/textarea';
import { classes } from '@spartan-ng/helm/utils';
import { cva, type VariantProps } from 'class-variance-authority';

const inputGroupAddonVariants = cva(
	'text-muted-foreground h-auto gap-2 py-1.5 text-xs font-medium group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-none [&>ng-icon:not([class*=\'text-\'])]:text-[calc(var(--spacing)*4)] flex cursor-text items-center justify-center select-none',
	{
		variants: {
			align: {
				'inline-start': 'ps-2 has-[>button]:ms-[-0.3rem] has-[>kbd]:ms-[-0.15rem] order-first',
				'inline-end': 'pe-2 has-[>button]:me-[-0.3rem] has-[>kbd]:me-[-0.15rem] order-last',
				'block-start': 'px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2 order-first w-full justify-start',
				'block-end': 'px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2 order-last w-full justify-start',
			},
		},
		defaultVariants: {
			align: 'inline-start',
		},
	},
);

type InputGroupAddonVariants = VariantProps<typeof inputGroupAddonVariants>;

@Directive({
	selector: '[hlmInputGroupAddon],hlm-input-group-addon',
	host: {
		role: 'group',
		'data-slot': 'input-group-addon',
		'[attr.data-align]': 'align()',
	},
})
export class HlmInputGroupAddon {
	public readonly align = input<InputGroupAddonVariants['align']>('inline-start');

	constructor() {
		classes(() => inputGroupAddonVariants({ align: this.align() }));
	}
}

const inputGroupAddonVariants = cva('gap-2 text-xs flex items-center shadow-none', {
	variants: {
		size: {
			xs: 'h-6 gap-1 rounded-none px-1.5 [&>ng-icon:not([class*=\'text-\'])]:text-[calc(var(--spacing)*3.5)]',
			sm: 'gap-1',
			'icon-xs': 'size-6 rounded-none p-0 has-[>ng-icon]:p-0',
			'icon-sm': 'size-7 p-0 has-[>ng-icon]:p-0',
		},
	},
	defaultVariants: {
		size: 'xs',
	},
});

type InputGroupAddonVariants = VariantProps<typeof inputGroupAddonVariants>;

@Directive({
	selector: 'button[hlmInputGroupButton]',
	providers: [
		provideBrnButtonConfig({
			variant: 'ghost',
		}),
	],
	hostDirectives: [
		{
			directive: HlmButton,
			inputs: ['variant'],
		},
	],
	host: {
		'[attr.data-size]': 'size()',
		'[type]': 'type()',
	},
})
export class HlmInputGroupButton {
	public readonly size = input<InputGroupAddonVariants['size']>('xs');
	public readonly type = input<'button' | 'submit' | 'reset'>('button');

	constructor() {
		classes(() => inputGroupAddonVariants({ size: this.size() }));
	}
}

@Directive({
	selector: 'input[hlmInputGroupInput]',
	hostDirectives: [HlmInput],
	host: { 'data-slot': 'input-group-control' },
})
export class HlmInputGroupInput {
	constructor() {
		classes(() => `rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent data-[matches-spartan-invalid=true]:ring-0 dark:bg-transparent dark:disabled:bg-transparent flex-1`);
	}
}

@Directive({
	selector: '[hlmInputGroupText],hlm-input-group-text',
})
export class HlmInputGroupText {
	constructor() {
		classes(() => 'text-muted-foreground gap-2 text-xs [&_ng-icon:not([class*=\'text-\'])]:text-[calc(var(--spacing)*4)] flex items-center [&_ng-icon]:pointer-events-none');
	}
}

@Directive({
	selector: 'textarea[hlmInputGroupTextarea]',
	hostDirectives: [HlmTextarea],
	host: { 'data-slot': 'input-group-control' },
})
export class HlmInputGroupTextarea {
	constructor() {
		classes(() => 'rounded-none border-0 bg-transparent py-2 shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent data-[matches-spartan-invalid=true]:ring-0 dark:bg-transparent dark:disabled:bg-transparent flex-1 resize-none');
	}
}

@Directive({
	selector: '[hlmInputGroup],hlm-input-group',
	host: {
		'data-slot': 'input-group',
		role: 'group',
	},
})
export class HlmInputGroup {
	constructor() {
		classes(
			() =>
				'border-input dark:bg-input/30 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][data-matches-spartan-invalid=true]]:ring-destructive/20 has-[[data-slot][data-matches-spartan-invalid=true]]:border-destructive dark:has-[[data-slot][data-matches-spartan-invalid=true]]:ring-destructive/40 has-disabled:bg-input/50 dark:has-disabled:bg-input/80 h-8 rounded-none border transition-colors in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-disabled:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:ring-1 has-[[data-slot][data-matches-spartan-invalid=true]]:ring-1 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pe-1.5 has-[>[data-align=inline-start]]:[&>input]:ps-1.5 group/input-group relative flex w-full min-w-0 items-center outline-none has-[>textarea]:h-auto',
		);
	}
}

export const HlmInputGroupImports = [
	HlmInputGroup,
	HlmInputGroupAddon,
	HlmInputGroupButton,
	HlmInputGroupInput,
	HlmInputGroupText,
	HlmInputGroupTextarea,
] as const;

import { Directive, input } from '@angular/core';
import { HlmButton, provideBrnButtonConfig } from '@spartan-ng/helm/button';
import { HlmInput } from '@spartan-ng/helm/input';
import { HlmTextarea } from '@spartan-ng/helm/textarea';
import { classes } from '@spartan-ng/helm/utils';
import { cva, type VariantProps } from 'class-variance-authority';

const inputGroupAddonVariants = cva(
	'text-muted-foreground **:data-[slot=kbd]:bg-muted-foreground/10 h-auto gap-2 py-2 text-sm font-medium group-data-[disabled=true]/input-group:opacity-50 **:data-[slot=kbd]:rounded-4xl **:data-[slot=kbd]:px-1.5 [&>ng-icon:not([class*=\'text-\'])]:text-[calc(var(--spacing)*4)] flex cursor-text items-center justify-center select-none',
	{
		variants: {
			align: {
				'inline-start': 'ps-3 has-[>button]:-ms-1 has-[>kbd]:ms-[-0.15rem] order-first',
				'inline-end': 'pe-3 has-[>button]:-me-1 has-[>kbd]:me-[-0.15rem] order-last',
				'block-start': 'px-3 pt-3 group-has-[>input]/input-group:pt-3 [.border-b]:pb-3 order-first w-full justify-start',
				'block-end': 'px-3 pb-3 group-has-[>input]/input-group:pb-3 [.border-t]:pt-3 order-last w-full justify-start',
			},
		},
		defaultVariants: {
			align: 'inline-start',
		},
	},
);

type InputGroupAddonVariants = VariantProps<typeof inputGroupAddonVariants>;

@Directive({
	selector: '[hlmInputGroupAddon],hlm-input-group-addon',
	host: {
		role: 'group',
		'data-slot': 'input-group-addon',
		'[attr.data-align]': 'align()',
	},
})
export class HlmInputGroupAddon {
	public readonly align = input<InputGroupAddonVariants['align']>('inline-start');

	constructor() {
		classes(() => inputGroupAddonVariants({ align: this.align() }));
	}
}

const inputGroupAddonVariants = cva('gap-2 rounded-4xl text-sm flex items-center shadow-none', {
	variants: {
		size: {
			xs: 'h-6 gap-1 px-1.5 [&>ng-icon:not([class*=\'text-\'])]:text-[calc(var(--spacing)*3.5)]',
			sm: '',
			'icon-xs': 'size-6 p-0 has-[>ng-icon]:p-0',
			'icon-sm': 'size-8 p-0 has-[>ng-icon]:p-0',
		},
	},
	defaultVariants: {
		size: 'xs',
	},
});

type InputGroupAddonVariants = VariantProps<typeof inputGroupAddonVariants>;

@Directive({
	selector: 'button[hlmInputGroupButton]',
	providers: [
		provideBrnButtonConfig({
			variant: 'ghost',
		}),
	],
	hostDirectives: [
		{
			directive: HlmButton,
			inputs: ['variant'],
		},
	],
	host: {
		'[attr.data-size]': 'size()',
		'[type]': 'type()',
	},
})
export class HlmInputGroupButton {
	public readonly size = input<InputGroupAddonVariants['size']>('xs');
	public readonly type = input<'button' | 'submit' | 'reset'>('button');

	constructor() {
		classes(() => inputGroupAddonVariants({ size: this.size() }));
	}
}

@Directive({
	selector: 'input[hlmInputGroupInput]',
	hostDirectives: [HlmInput],
	host: { 'data-slot': 'input-group-control' },
})
export class HlmInputGroupInput {
	constructor() {
		classes(() => `rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 data-[matches-spartan-invalid=true]:ring-0 dark:bg-transparent flex-1`);
	}
}

@Directive({
	selector: '[hlmInputGroupText],hlm-input-group-text',
})
export class HlmInputGroupText {
	constructor() {
		classes(() => 'text-muted-foreground gap-2 text-sm [&_ng-icon:not([class*=\'text-\'])]:text-[calc(var(--spacing)*4)] flex items-center [&_ng-icon]:pointer-events-none');
	}
}

@Directive({
	selector: 'textarea[hlmInputGroupTextarea]',
	hostDirectives: [HlmTextarea],
	host: { 'data-slot': 'input-group-control' },
})
export class HlmInputGroupTextarea {
	constructor() {
		classes(() => 'rounded-none border-0 bg-transparent py-2 shadow-none ring-0 focus-visible:ring-0 data-[matches-spartan-invalid=true]:ring-0 dark:bg-transparent flex-1 resize-none');
	}
}

@Directive({
	selector: '[hlmInputGroup],hlm-input-group',
	host: {
		'data-slot': 'input-group',
		role: 'group',
	},
})
export class HlmInputGroup {
	constructor() {
		classes(
			() =>
				'border-input bg-input/30 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][data-matches-spartan-invalid=true]]:ring-destructive/20 has-[[data-slot][data-matches-spartan-invalid=true]]:border-destructive dark:has-[[data-slot][data-matches-spartan-invalid=true]]:ring-destructive/40 h-9 rounded-4xl border transition-colors in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-data-[align=block-end]:rounded-2xl has-data-[align=block-start]:rounded-2xl has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot][data-matches-spartan-invalid=true]]:ring-3 has-[textarea]:rounded-xl has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pe-1.5 has-[>[data-align=inline-start]]:[&>input]:ps-1.5 group/input-group relative flex w-full min-w-0 items-center outline-none has-[>textarea]:h-auto',
		);
	}
}

export const HlmInputGroupImports = [
	HlmInputGroup,
	HlmInputGroupAddon,
	HlmInputGroupButton,
	HlmInputGroupInput,
	HlmInputGroupText,
	HlmInputGroupTextarea,
] as const;

import { Directive, input } from '@angular/core';
import { HlmButton, provideBrnButtonConfig } from '@spartan-ng/helm/button';
import { HlmInput } from '@spartan-ng/helm/input';
import { HlmTextarea } from '@spartan-ng/helm/textarea';
import { classes } from '@spartan-ng/helm/utils';
import { cva, type VariantProps } from 'class-variance-authority';

const inputGroupAddonVariants = cva(
	'text-muted-foreground **:data-[slot=kbd]:bg-muted-foreground/10 h-auto gap-1 py-2 text-xs/relaxed font-medium group-data-[disabled=true]/input-group:opacity-50 **:data-[slot=kbd]:rounded-[calc(var(--radius-sm)-2px)] **:data-[slot=kbd]:px-1 **:data-[slot=kbd]:text-[0.625rem] [&>ng-icon:not([class*=\'text-\'])]:text-[calc(var(--spacing)*3.5)] flex cursor-text items-center justify-center select-none',
	{
		variants: {
			align: {
				'inline-start': 'ps-2 has-[>button]:ms-[-0.275rem] has-[>kbd]:ms-[-0.275rem] order-first',
				'inline-end': 'pe-2 has-[>button]:me-[-0.275rem] has-[>kbd]:me-[-0.275rem] order-last',
				'block-start': 'px-2 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2 order-first w-full justify-start',
				'block-end': 'px-2 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2 order-last w-full justify-start',
			},
		},
		defaultVariants: {
			align: 'inline-start',
		},
	},
);

type InputGroupAddonVariants = VariantProps<typeof inputGroupAddonVariants>;

@Directive({
	selector: '[hlmInputGroupAddon],hlm-input-group-addon',
	host: {
		role: 'group',
		'data-slot': 'input-group-addon',
		'[attr.data-align]': 'align()',
	},
})
export class HlmInputGroupAddon {
	public readonly align = input<InputGroupAddonVariants['align']>('inline-start');

	constructor() {
		classes(() => inputGroupAddonVariants({ align: this.align() }));
	}
}

const inputGroupAddonVariants = cva('gap-2 rounded-md text-xs/relaxed flex items-center shadow-none', {
	variants: {
		size: {
			xs: 'h-5 gap-1 rounded-[calc(var(--radius-sm)-2px)] px-1 [&>ng-icon:not([class*=\'text-\'])]:text-[calc(var(--spacing)*3)]',
			sm: 'gap-1',
			'icon-xs': 'size-6 p-0 has-[>ng-icon]:p-0',
			'icon-sm': 'size-7 p-0 has-[>ng-icon]:p-0',
		},
	},
	defaultVariants: {
		size: 'xs',
	},
});

type InputGroupAddonVariants = VariantProps<typeof inputGroupAddonVariants>;

@Directive({
	selector: 'button[hlmInputGroupButton]',
	providers: [
		provideBrnButtonConfig({
			variant: 'ghost',
		}),
	],
	hostDirectives: [
		{
			directive: HlmButton,
			inputs: ['variant'],
		},
	],
	host: {
		'[attr.data-size]': 'size()',
		'[type]': 'type()',
	},
})
export class HlmInputGroupButton {
	public readonly size = input<InputGroupAddonVariants['size']>('xs');
	public readonly type = input<'button' | 'submit' | 'reset'>('button');

	constructor() {
		classes(() => inputGroupAddonVariants({ size: this.size() }));
	}
}

@Directive({
	selector: 'input[hlmInputGroupInput]',
	hostDirectives: [HlmInput],
	host: { 'data-slot': 'input-group-control' },
})
export class HlmInputGroupInput {
	constructor() {
		classes(() => `rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 data-[matches-spartan-invalid=true]:ring-0 dark:bg-transparent flex-1`);
	}
}

@Directive({
	selector: '[hlmInputGroupText],hlm-input-group-text',
})
export class HlmInputGroupText {
	constructor() {
		classes(() => 'text-muted-foreground gap-2 text-xs/relaxed [&_ng-icon:not([class*=\'text-\'])]:text-[calc(var(--spacing)*4)] flex items-center [&_ng-icon]:pointer-events-none');
	}
}

@Directive({
	selector: 'textarea[hlmInputGroupTextarea]',
	hostDirectives: [HlmTextarea],
	host: { 'data-slot': 'input-group-control' },
})
export class HlmInputGroupTextarea {
	constructor() {
		classes(() => 'rounded-none border-0 bg-transparent py-2 shadow-none ring-0 focus-visible:ring-0 data-[matches-spartan-invalid=true]:ring-0 dark:bg-transparent flex-1 resize-none');
	}
}

@Directive({
	selector: '[hlmInputGroup],hlm-input-group',
	host: {
		'data-slot': 'input-group',
		role: 'group',
	},
})
export class HlmInputGroup {
	constructor() {
		classes(
			() =>
				'border-input bg-input/20 dark:bg-input/30 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/30 has-[[data-slot][data-matches-spartan-invalid=true]]:ring-destructive/20 has-[[data-slot][data-matches-spartan-invalid=true]]:border-destructive dark:has-[[data-slot][data-matches-spartan-invalid=true]]:ring-destructive/40 h-7 rounded-md border transition-colors in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-data-[align=block-end]:rounded-md has-data-[align=block-start]:rounded-md has-[[data-slot=input-group-control]:focus-visible]:ring-2 has-[[data-slot][data-matches-spartan-invalid=true]]:ring-2 has-[textarea]:rounded-md has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pe-1.5 has-[>[data-align=inline-start]]:[&>input]:ps-1.5 group/input-group relative flex w-full min-w-0 items-center outline-none has-[>textarea]:h-auto',
		);
	}
}

export const HlmInputGroupImports = [
	HlmInputGroup,
	HlmInputGroupAddon,
	HlmInputGroupButton,
	HlmInputGroupInput,
	HlmInputGroupText,
	HlmInputGroupTextarea,
] as const;

import { Directive, input } from '@angular/core';
import { HlmButton, provideBrnButtonConfig } from '@spartan-ng/helm/button';
import { HlmInput } from '@spartan-ng/helm/input';
import { HlmTextarea } from '@spartan-ng/helm/textarea';
import { classes } from '@spartan-ng/helm/utils';
import { cva, type VariantProps } from 'class-variance-authority';

const inputGroupAddonVariants = cva(
	'text-muted-foreground h-auto gap-2 py-1.5 text-sm font-medium group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>ng-icon:not([class*=\'text-\'])]:text-[calc(var(--spacing)*4)] flex cursor-text items-center justify-center select-none',
	{
		variants: {
			align: {
				'inline-start': 'ps-2 has-[>button]:ms-[-0.3rem] has-[>kbd]:ms-[-0.15rem] order-first',
				'inline-end': 'pe-2 has-[>button]:me-[-0.3rem] has-[>kbd]:me-[-0.15rem] order-last',
				'block-start': 'px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2 order-first w-full justify-start',
				'block-end': 'px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2 order-last w-full justify-start',
			},
		},
		defaultVariants: {
			align: 'inline-start',
		},
	},
);

type InputGroupAddonVariants = VariantProps<typeof inputGroupAddonVariants>;

@Directive({
	selector: '[hlmInputGroupAddon],hlm-input-group-addon',
	host: {
		role: 'group',
		'data-slot': 'input-group-addon',
		'[attr.data-align]': 'align()',
	},
})
export class HlmInputGroupAddon {
	public readonly align = input<InputGroupAddonVariants['align']>('inline-start');

	constructor() {
		classes(() => inputGroupAddonVariants({ align: this.align() }));
	}
}

const inputGroupAddonVariants = cva('gap-2 text-sm flex items-center shadow-none', {
	variants: {
		size: {
			xs: 'h-6 gap-1 rounded-[calc(var(--radius)-3px)] px-1.5 [&>ng-icon:not([class*=\'text-\'])]:text-[calc(var(--spacing)*3.5)]',
			sm: '',
			'icon-xs': 'size-6 rounded-[calc(var(--radius)-3px)] p-0 has-[>ng-icon]:p-0',
			'icon-sm': 'size-8 p-0 has-[>ng-icon]:p-0',
		},
	},
	defaultVariants: {
		size: 'xs',
	},
});

type InputGroupAddonVariants = VariantProps<typeof inputGroupAddonVariants>;

@Directive({
	selector: 'button[hlmInputGroupButton]',
	providers: [
		provideBrnButtonConfig({
			variant: 'ghost',
		}),
	],
	hostDirectives: [
		{
			directive: HlmButton,
			inputs: ['variant'],
		},
	],
	host: {
		'[attr.data-size]': 'size()',
		'[type]': 'type()',
	},
})
export class HlmInputGroupButton {
	public readonly size = input<InputGroupAddonVariants['size']>('xs');
	public readonly type = input<'button' | 'submit' | 'reset'>('button');

	constructor() {
		classes(() => inputGroupAddonVariants({ size: this.size() }));
	}
}

@Directive({
	selector: 'input[hlmInputGroupInput]',
	hostDirectives: [HlmInput],
	host: { 'data-slot': 'input-group-control' },
})
export class HlmInputGroupInput {
	constructor() {
		classes(() => `rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent data-[matches-spartan-invalid=true]:ring-0 dark:bg-transparent dark:disabled:bg-transparent flex-1`);
	}
}

@Directive({
	selector: '[hlmInputGroupText],hlm-input-group-text',
})
export class HlmInputGroupText {
	constructor() {
		classes(() => 'text-muted-foreground gap-2 text-sm [&_ng-icon:not([class*=\'text-\'])]:text-[calc(var(--spacing)*4)] flex items-center [&_ng-icon]:pointer-events-none');
	}
}

@Directive({
	selector: 'textarea[hlmInputGroupTextarea]',
	hostDirectives: [HlmTextarea],
	host: { 'data-slot': 'input-group-control' },
})
export class HlmInputGroupTextarea {
	constructor() {
		classes(() => 'rounded-none border-0 bg-transparent py-2 shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent data-[matches-spartan-invalid=true]:ring-0 dark:bg-transparent dark:disabled:bg-transparent flex-1 resize-none');
	}
}

@Directive({
	selector: '[hlmInputGroup],hlm-input-group',
	host: {
		'data-slot': 'input-group',
		role: 'group',
	},
})
export class HlmInputGroup {
	constructor() {
		classes(
			() =>
				'border-input dark:bg-input/30 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][data-matches-spartan-invalid=true]]:ring-destructive/20 has-[[data-slot][data-matches-spartan-invalid=true]]:border-destructive dark:has-[[data-slot][data-matches-spartan-invalid=true]]:ring-destructive/40 has-[[data-slot=input-group-control]:disabled]:bg-input/50 dark:has-[[data-slot=input-group-control]:disabled]:bg-input/80 h-8 rounded-lg border transition-colors in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-[[data-slot=input-group-control]:disabled]:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot][data-matches-spartan-invalid=true]]:ring-3 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pe-1.5 has-[>[data-align=inline-start]]:[&>input]:ps-1.5 group/input-group relative flex w-full min-w-0 items-center outline-none has-[>textarea]:h-auto',
		);
	}
}

export const HlmInputGroupImports = [
	HlmInputGroup,
	HlmInputGroupAddon,
	HlmInputGroupButton,
	HlmInputGroupInput,
	HlmInputGroupText,
	HlmInputGroupTextarea,
] as const;

import { Directive, input } from '@angular/core';
import { HlmButton, provideBrnButtonConfig } from '@spartan-ng/helm/button';
import { HlmInput } from '@spartan-ng/helm/input';
import { HlmTextarea } from '@spartan-ng/helm/textarea';
import { classes } from '@spartan-ng/helm/utils';
import { cva, type VariantProps } from 'class-variance-authority';

const inputGroupAddonVariants = cva(
	'text-muted-foreground **:data-[slot=kbd]:bg-muted-foreground/10 h-auto gap-2 py-2 text-sm font-medium group-data-[disabled=true]/input-group:opacity-50 **:data-[slot=kbd]:rounded-3xl **:data-[slot=kbd]:px-1.5 [&>ng-icon:not([class*=\'text-\'])]:text-[calc(var(--spacing)*4)] flex cursor-text items-center justify-center select-none',
	{
		variants: {
			align: {
				'inline-start': 'ps-3 has-[>button]:-ms-1 has-[>kbd]:-ms-1 order-first',
				'inline-end': 'pe-3 has-[>button]:-me-1 has-[>kbd]:-me-1 order-last',
				'block-start': 'px-3 pt-3 group-has-[>input]/input-group:pt-3.5 [.border-b]:pb-3.5 order-first w-full justify-start',
				'block-end': 'px-3 pb-3 group-has-[>input]/input-group:pb-3.5 [.border-t]:pt-3.5 order-last w-full justify-start',
			},
		},
		defaultVariants: {
			align: 'inline-start',
		},
	},
);

type InputGroupAddonVariants = VariantProps<typeof inputGroupAddonVariants>;

@Directive({
	selector: '[hlmInputGroupAddon],hlm-input-group-addon',
	host: {
		role: 'group',
		'data-slot': 'input-group-addon',
		'[attr.data-align]': 'align()',
	},
})
export class HlmInputGroupAddon {
	public readonly align = input<InputGroupAddonVariants['align']>('inline-start');

	constructor() {
		classes(() => inputGroupAddonVariants({ align: this.align() }));
	}
}

const inputGroupAddonVariants = cva('gap-2 rounded-4xl text-sm flex items-center shadow-none', {
	variants: {
		size: {
			xs: 'h-6 gap-1 rounded-xl px-1.5 [&>ng-icon:not([class*=\'text-\'])]:text-[calc(var(--spacing)*3.5)]',
			sm: '',
			'icon-xs': 'size-6 rounded-xl p-0 has-[>ng-icon]:p-0',
			'icon-sm': 'size-8 p-0 has-[>ng-icon]:p-0',
		},
	},
	defaultVariants: {
		size: 'xs',
	},
});

type InputGroupAddonVariants = VariantProps<typeof inputGroupAddonVariants>;

@Directive({
	selector: 'button[hlmInputGroupButton]',
	providers: [
		provideBrnButtonConfig({
			variant: 'ghost',
		}),
	],
	hostDirectives: [
		{
			directive: HlmButton,
			inputs: ['variant'],
		},
	],
	host: {
		'[attr.data-size]': 'size()',
		'[type]': 'type()',
	},
})
export class HlmInputGroupButton {
	public readonly size = input<InputGroupAddonVariants['size']>('xs');
	public readonly type = input<'button' | 'submit' | 'reset'>('button');

	constructor() {
		classes(() => inputGroupAddonVariants({ size: this.size() }));
	}
}

@Directive({
	selector: 'input[hlmInputGroupInput]',
	hostDirectives: [HlmInput],
	host: { 'data-slot': 'input-group-control' },
})
export class HlmInputGroupInput {
	constructor() {
		classes(() => `rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 data-[matches-spartan-invalid=true]:ring-0 dark:bg-transparent flex-1`);
	}
}

@Directive({
	selector: '[hlmInputGroupText],hlm-input-group-text',
})
export class HlmInputGroupText {
	constructor() {
		classes(() => 'text-muted-foreground gap-2 text-sm [&_ng-icon:not([class*=\'text-\'])]:text-[calc(var(--spacing)*4)] flex items-center [&_ng-icon]:pointer-events-none');
	}
}

@Directive({
	selector: 'textarea[hlmInputGroupTextarea]',
	hostDirectives: [HlmTextarea],
	host: { 'data-slot': 'input-group-control' },
})
export class HlmInputGroupTextarea {
	constructor() {
		classes(() => 'rounded-none border-0 bg-transparent py-2.5 shadow-none ring-0 focus-visible:ring-0 data-[matches-spartan-invalid=true]:ring-0 dark:bg-transparent flex-1 resize-none');
	}
}

@Directive({
	selector: '[hlmInputGroup],hlm-input-group',
	host: {
		'data-slot': 'input-group',
		role: 'group',
	},
})
export class HlmInputGroup {
	constructor() {
		classes(
			() =>
				'bg-input/50 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/30 has-[[data-slot][data-matches-spartan-invalid=true]]:ring-destructive/20 has-[[data-slot][data-matches-spartan-invalid=true]]:border-destructive dark:has-[[data-slot][data-matches-spartan-invalid=true]]:ring-destructive/40 h-9 rounded-4xl border border-transparent transition-[color,box-shadow,background-color] in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-data-[align=block-end]:rounded-3xl has-data-[align=block-start]:rounded-3xl has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot][data-matches-spartan-invalid=true]]:ring-3 has-[textarea]:rounded-2xl has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pe-1.5 has-[>[data-align=inline-start]]:[&>input]:ps-1.5 group/input-group relative flex w-full min-w-0 items-center outline-none has-[>textarea]:h-auto',
		);
	}
}

export const HlmInputGroupImports = [
	HlmInputGroup,
	HlmInputGroupAddon,
	HlmInputGroupButton,
	HlmInputGroupInput,
	HlmInputGroupText,
	HlmInputGroupTextarea,
] as const;

Usage

import { HlmInputGroupImports } from '@spartan-ng/helm/input-group';

<hlm-input-group>
  <input hlmInputGroupInput placeholder="Search..." />
  <hlm-input-group-addon>
    <ng-icon name="lucideSearch" />
  </hlm-input-group-addon>
</hlm-input-group>

Examples

Icon

import { ChangeDetectionStrategy, 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 })],
	changeDetection: ChangeDetectionStrategy.OnPush,
	host: { class: 'grid w-full max-w-sm gap-6' },
	template: `
		<hlm-input-group>
			<input hlmInputGroupInput placeholder="Search..." />
			<hlm-input-group-addon>
				<ng-icon name="lucideSearch" />
			</hlm-input-group-addon>
		</hlm-input-group>
		<hlm-input-group>
			<input hlmInputGroupInput type="email" placeholder="Enter your email" />
			<hlm-input-group-addon>
				<ng-icon name="lucideMail" />
			</hlm-input-group-addon>
		</hlm-input-group>
		<hlm-input-group>
			<input hlmInputGroupInput placeholder="Card number" />
			<hlm-input-group-addon>
				<ng-icon name="lucideCreditCard" />
			</hlm-input-group-addon>
			<hlm-input-group-addon align="inline-end">
				<ng-icon name="lucideCheck" />
			</hlm-input-group-addon>
		</hlm-input-group>
		<hlm-input-group>
			<input hlmInputGroupInput placeholder="Card number" />
			<hlm-input-group-addon align="inline-end">
				<ng-icon name="lucideStar" />
				<ng-icon name="lucideInfo" />
			</hlm-input-group-addon>
		</hlm-input-group>
	`,
})
export class InputGroupIconPreview {}

Text

USD

https://

.com

@company.com

120 characters left

import { ChangeDetectionStrategy, Component } from '@angular/core';
import { HlmInputGroupImports } from '@spartan-ng/helm/input-group';

@Component({
	selector: 'spartan-input-group-text-preview',
	imports: [HlmInputGroupImports],
	changeDetection: ChangeDetectionStrategy.OnPush,
	host: { class: 'grid w-full max-w-sm gap-6' },
	template: `
		<hlm-input-group>
			<hlm-input-group-addon>
				<hlm-input-group-text>$</hlm-input-group-text>
			</hlm-input-group-addon>
			<input hlmInputGroupInput placeholder="0.00" />
			<hlm-input-group-addon align="inline-end">
				<hlm-input-group-text>USD</hlm-input-group-text>
			</hlm-input-group-addon>
		</hlm-input-group>
		<hlm-input-group>
			<hlm-input-group-addon>
				<hlm-input-group-text>https://</hlm-input-group-text>
			</hlm-input-group-addon>
			<input hlmInputGroupInput placeholder="example.com" class="pl-0.5!" />
			<hlm-input-group-addon align="inline-end">
				<hlm-input-group-text>.com</hlm-input-group-text>
			</hlm-input-group-addon>
		</hlm-input-group>
		<hlm-input-group>
			<input hlmInputGroupInput placeholder="Enter your username" />
			<hlm-input-group-addon align="inline-end">
				<hlm-input-group-text>&#64;company.com</hlm-input-group-text>
			</hlm-input-group-addon>
		</hlm-input-group>
		<hlm-input-group>
			<textarea hlmInputGroupTextarea placeholder="Enter your message"></textarea>
			<hlm-input-group-addon align="block-end">
				<hlm-input-group-text class="text-muted-foreground text-xs">120 characters left</hlm-input-group-text>
			</hlm-input-group-addon>
		</hlm-input-group>
	`,
})
export class InputGroupTextPreview {}

Button

https://

import { ChangeDetectionStrategy, Component, computed, signal } from '@angular/core';
import { provideIcons } from '@ng-icons/core';
import { tablerCheck, tablerCopy, tablerInfoCircle, tablerStar } from '@ng-icons/tabler-icons';
import { HlmIconImports } from '@spartan-ng/helm/icon';
import { HlmInputGroupImports } from '@spartan-ng/helm/input-group';
import { HlmPopoverImports } from '@spartan-ng/helm/popover';

@Component({
	selector: 'spartan-input-group-button-preview',
	imports: [HlmInputGroupImports, HlmIconImports, HlmPopoverImports],
	providers: [provideIcons({ tablerCheck, tablerCopy, tablerInfoCircle, tablerStar })],
	changeDetection: ChangeDetectionStrategy.OnPush,
	host: { class: 'grid w-full max-w-sm gap-6' },
	template: `
		<hlm-input-group>
			<input hlmInputGroupInput placeholder="https://github.com/spartan-ng/spartan" readOnly />
			<hlm-input-group-addon align="inline-end">
				<button
					hlmInputGroupButton
					aria-label="Copy"
					title="Copy"
					size="icon-xs"
					(click)="_copy('https://github.com/spartan-ng/spartan')"
				>
					<ng-icon [name]="_isCopied() ? 'tablerCheck' : 'tablerCopy'" />
				</button>
			</hlm-input-group-addon>
		</hlm-input-group>
		<hlm-input-group class="[--radius:9999px]">
			<hlm-input-group-addon>
				<button
					hlmInputGroupButton
					variant="secondary"
					size="icon-xs"
					hlmPopoverTrigger
					[hlmPopoverTriggerFor]="brnPopover"
				>
					<ng-icon name="tablerInfoCircle" />
				</button>
			</hlm-input-group-addon>

			<hlm-input-group-addon class="text-muted-foreground pl-1.5">https://</hlm-input-group-addon>
			<input hlmInputGroupInput id="input-secure-19" />
			<hlm-input-group-addon align="inline-end">
				<button hlmInputGroupButton size="icon-xs" (click)="_toggleFavorite()">
					<ng-icon name="tablerStar" [class]="_favoriteClass()" />
				</button>
			</hlm-input-group-addon>
		</hlm-input-group>
		<hlm-input-group>
			<input hlmInputGroupInput placeholder="Type to search..." />
			<hlm-input-group-addon align="inline-end">
				<button hlmInputGroupButton variant="secondary">Search</button>
			</hlm-input-group-addon>
		</hlm-input-group>

		<hlm-popover sideOffset="10" align="start" #brnPopover="brnPopover">
			<hlm-popover-content class="flex flex-col gap-1 rounded-xl text-sm" *hlmPopoverPortal="let ctx">
				<p class="font-medium">Your connection is not secure.</p>
				<p>You should not enter any sensitive information on this site.</p>
			</hlm-popover-content>
		</hlm-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);
	}
}

Kbd

⌘K

import { ChangeDetectionStrategy, Component } from '@angular/core';
import { NgIcon, provideIcons } from '@ng-icons/core';
import { lucideSearch } from '@ng-icons/lucide';
import { HlmInputGroupImports } from '@spartan-ng/helm/input-group';
import { HlmKbdImports } from '@spartan-ng/helm/kbd';

@Component({
	selector: 'spartan-input-group-kbd',
	imports: [HlmInputGroupImports, NgIcon, HlmKbdImports],
	providers: [provideIcons({ lucideSearch })],
	changeDetection: ChangeDetectionStrategy.OnPush,
	host: { class: 'max-w-sm' },
	template: `
		<hlm-input-group>
			<input hlmInputGroupInput placeholder="Search..." />
			<hlm-input-group-addon>
				<ng-icon name="lucideSearch" />
			</hlm-input-group-addon>
			<hlm-input-group-addon align="inline-end">
				<kbd hlmKbd>⌘K</kbd>
			</hlm-input-group-addon>
		</hlm-input-group>
	`,
})
export class InputGroupKbd {}

import { ChangeDetectionStrategy, Component } from '@angular/core';
import { provideIcons } from '@ng-icons/core';
import { lucideChevronDown, lucideEllipsis } from '@ng-icons/lucide';
import { HlmDropdownMenuImports } from '@spartan-ng/helm/dropdown-menu';
import { HlmIconImports } from '@spartan-ng/helm/icon';
import { HlmInputGroupImports } from '@spartan-ng/helm/input-group';

@Component({
	selector: 'spartan-input-group-dropdown-preview',
	imports: [HlmInputGroupImports, HlmIconImports, HlmDropdownMenuImports],
	providers: [provideIcons({ lucideEllipsis, lucideChevronDown })],
	changeDetection: ChangeDetectionStrategy.OnPush,
	host: { class: 'grid w-full max-w-sm gap-6' },
	template: `
		<hlm-input-group>
			<input hlmInputGroupInput placeholder="Enter file name" />

			<hlm-input-group-addon align="inline-end">
				<button
					hlmInputGroupButton
					variant="ghost"
					aria-label="More"
					size="icon-xs"
					[hlmDropdownMenuTrigger]="fileMenu"
					align="end"
				>
					<ng-icon name="lucideEllipsis" />
				</button>
			</hlm-input-group-addon>
		</hlm-input-group>
		<hlm-input-group class="[--radius:1rem]">
			<input hlmInputGroupInput placeholder="Enter search query" />

			<hlm-input-group-addon align="inline-end">
				<button
					hlmInputGroupButton
					variant="ghost"
					class="pe-1.5! text-xs"
					[hlmDropdownMenuTrigger]="searchMenu"
					align="end"
				>
					Search In...
					<ng-icon name="lucideChevronDown" />
				</button>
			</hlm-input-group-addon>
		</hlm-input-group>

		<ng-template #fileMenu>
			<hlm-dropdown-menu class="w-48">
				<button hlmDropdownMenuItem>Settings</button>
				<button hlmDropdownMenuItem>Copy path</button>
				<button hlmDropdownMenuItem>Open location</button>
			</hlm-dropdown-menu>
		</ng-template>

		<ng-template #searchMenu>
			<hlm-dropdown-menu class="w-56 [--radius:0.95rem]">
				<button hlmDropdownMenuItem>Documentation</button>
				<button hlmDropdownMenuItem>Blog Posts</button>
				<button hlmDropdownMenuItem>Changelog</button>
			</hlm-dropdown-menu>
		</ng-template>
	`,
})
export class InputGroupDropdownPreview {}

Spinner

Saving...

Please wait...

import { ChangeDetectionStrategy, Component } from '@angular/core';
import { NgIcon, provideIcons } from '@ng-icons/core';
import { lucideLoader } from '@ng-icons/lucide';
import { HlmInputGroupImports } from '@spartan-ng/helm/input-group';
import { HlmSpinnerImports } from '@spartan-ng/helm/spinner';

@Component({
	selector: 'spartan-input-group-spinner-preview',
	imports: [HlmInputGroupImports, NgIcon, HlmSpinnerImports],
	providers: [provideIcons({ lucideLoader })],
	changeDetection: ChangeDetectionStrategy.OnPush,
	host: { class: 'grid w-full max-w-sm gap-6' },
	template: `
		<hlm-input-group>
			<input hlmInputGroupInput placeholder="Searching..." />
			<hlm-input-group-addon align="inline-end">
				<hlm-spinner />
			</hlm-input-group-addon>
		</hlm-input-group>

		<hlm-input-group>
			<input hlmInputGroupInput placeholder="Processing..." />
			<hlm-input-group-addon>
				<hlm-spinner />
			</hlm-input-group-addon>
		</hlm-input-group>

		<hlm-input-group>
			<input hlmInputGroupInput placeholder="Saving changes..." />
			<hlm-input-group-addon align="inline-end">
				<hlm-input-group-text>Saving...</hlm-input-group-text>
				<hlm-spinner />
			</hlm-input-group-addon>
		</hlm-input-group>

		<hlm-input-group>
			<input hlmInputGroupInput placeholder="Refreshing data..." />
			<hlm-input-group-addon>
				<ng-icon name="lucideLoader" class="motion-safe:animate-spin" />
			</hlm-input-group-addon>

			<hlm-input-group-addon align="inline-end">
				<hlm-input-group-text>Please wait...</hlm-input-group-text>
			</hlm-input-group-addon>
		</hlm-input-group>
	`,
})
export class InputGroupSpinnerPreview {}

Textarea

Input groups also work with textarea components. Use block-start or block-end for alignment.

Line 1, Column 1

script.js

import { ChangeDetectionStrategy, 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 })],
	changeDetection: ChangeDetectionStrategy.OnPush,
	host: { class: 'grid w-full max-w-sm gap-6' },
	template: `
		<hlm-input-group>
			<textarea
				hlmInputGroupTextarea
				id="textarea-code-32"
				placeholder="console.log('Hello, world!');"
				class="min-h-50"
			></textarea>
			<hlm-input-group-addon align="block-end" class="border-t">
				<hlm-input-group-text>Line 1, Column 1</hlm-input-group-text>
				<button hlmInputGroupButton size="sm" class="ml-auto" variant="default">
					Run
					<ng-icon name="tablerCornerDownLeft" />
				</button>
			</hlm-input-group-addon>
			<hlm-input-group-addon align="block-start" class="border-b">
				<hlm-input-group-text class="font-mono font-medium">
					<ng-icon name="tablerBrandJavascript" />
					script.js
				</hlm-input-group-text>
				<button hlmInputGroupButton class="ml-auto" size="icon-xs">
					<ng-icon name="tablerRefresh" />
				</button>
				<button hlmInputGroupButton variant="ghost" size="icon-xs">
					<ng-icon name="tablerCopy" />
				</button>
			</hlm-input-group-addon>
		</hlm-input-group>
	`,
})
export class InputGroupTextareaPreview {}

Add tooltips to provide additional context or help.

import { ChangeDetectionStrategy, 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 { HlmTooltipImports } from '@spartan-ng/helm/tooltip';

@Component({
	selector: 'spartan-input-group-tooltip-preview',
	imports: [HlmInputGroupImports, HlmTooltipImports, HlmIconImports],
	providers: [provideIcons({ lucideInfo })],
	changeDetection: ChangeDetectionStrategy.OnPush,
	host: { class: 'grid w-full max-w-sm gap-6' },
	template: `
		<hlm-input-group>
			<input hlmInputGroupInput placeholder="Enter password" type="password" />
			<hlm-input-group-addon align="inline-end">
				<button
					hlmInputGroupButton
					[hlmTooltip]="'Password must be at least 8 characters'"
					variant="ghost"
					aria-label="Info"
					size="icon-xs"
				>
					<ng-icon name="lucideInfo" />
				</button>
			</hlm-input-group-addon>
		</hlm-input-group>
		<hlm-input-group>
			<input hlmInputGroupInput placeholder="Your email address" />
			<hlm-input-group-addon align="inline-end">
				<button hlmInputGroupButton [hlmTooltip]="tooltip" variant="ghost" aria-label="Info" size="icon-xs">
					<ng-icon name="lucideInfo" />
				</button>
				<ng-template #tooltip>We'll use this to send you notifications</ng-template>
			</hlm-input-group-addon>
		</hlm-input-group>
		<hlm-input-group>
			<input hlmInputGroupInput placeholder="Enter API key" />
			<hlm-input-group-addon>
				<button
					hlmInputGroupButton
					[hlmTooltip]="'Click for help with API keys'"
					position="left"
					variant="ghost"
					aria-label="Info"
					size="icon-xs"
				>
					<ng-icon name="lucideInfo" />
				</button>
			</hlm-input-group-addon>
		</hlm-input-group>
	`,
})
export class InputGroupTooltipPreview {}

Label

Add labels within input groups to improve accessibility.

import { ChangeDetectionStrategy, 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 })],
	changeDetection: ChangeDetectionStrategy.OnPush,
	host: { class: 'grid w-full max-w-sm gap-6' },
	template: `
		<hlm-input-group>
			<input hlmInputGroupInput id="email" placeholder="spartan" />
			<hlm-input-group-addon>
				<label for="email" hlmLabel>&#64;</label>
			</hlm-input-group-addon>
		</hlm-input-group>

		<hlm-input-group>
			<input hlmInputGroupInput id="email-2" placeholder="spartan-ng@github.com" />
			<hlm-input-group-addon align="block-start">
				<label for="email-2" class="text-foreground" hlmLabel>Email</label>
				<button
					hlmInputGroupButton
					[hlmTooltip]="tooltip"
					variant="ghost"
					aria-label="Help"
					class="ml-auto rounded-full"
					size="icon-xs"
				>
					<ng-icon name="lucideInfo" />
				</button>
				<ng-template #tooltip>We'll use this to send you notifications</ng-template>
			</hlm-input-group-addon>
		</hlm-input-group>
	`,
})
export class InputGroupLabelPreview {}

Button Group

Wrap input groups with button groups to create prefixes and suffixes.

https://

.com

import { ChangeDetectionStrategy, 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',
	imports: [HlmInputGroupImports, HlmButtonGroupImports, HlmLabelImports, HlmIconImports],
	providers: [provideIcons({ lucideLink2 })],
	changeDetection: ChangeDetectionStrategy.OnPush,
	host: { class: 'grid w-full max-w-sm gap-6' },
	template: `
		<hlm-button-group>
			<hlm-button-group-text>
				<label hlmLabel for="url">https://</label>
			</hlm-button-group-text>
			<hlm-input-group>
				<input hlmInputGroupInput id="url" />
				<hlm-input-group-addon align="inline-end">
					<ng-icon name="lucideLink2" />
				</hlm-input-group-addon>
			</hlm-input-group>
			<hlm-button-group-text>.com</hlm-button-group-text>
		</hlm-button-group>
	`,
})
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 { ChangeDetectionStrategy, 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',
	imports: [HlmInputGroupImports, CdkTextareaAutosize],
	providers: [provideIcons({ lucideLink2 })],
	changeDetection: ChangeDetectionStrategy.OnPush,
	host: { class: 'grid w-full max-w-sm gap-6' },
	template: `
		<hlm-input-group>
			<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>

			<hlm-input-group-addon align="block-end">
				<button hlmInputGroupButton class="ml-auto" size="sm" variant="default">Submit</button>
			</hlm-input-group-addon>
		</hlm-input-group>
	`,
})
export class InputGroupCustomInputPreview {}

Form

import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
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-form-preview',
	imports: [ReactiveFormsModule, HlmInputGroupImports, HlmLabelImports, HlmIconImports, HlmTooltipImports],
	providers: [provideIcons({ lucideInfo })],
	changeDetection: ChangeDetectionStrategy.OnPush,
	host: { class: 'grid w-full max-w-sm gap-6' },
	template: `
		<form [formGroup]="form" (ngSubmit)="submit()" class="space-y-8">
			<hlm-input-group>
				<input hlmInputGroupInput id="email-form" placeholder="spartan-ng@github.com" formControlName="email" />
				<hlm-input-group-addon align="block-start">
					<label for="email-form" class="text-foreground" hlmLabel>Email</label>
					<button
						hlmInputGroupButton
						[hlmTooltip]="tooltip"
						variant="ghost"
						aria-label="Help"
						class="ml-auto rounded-full"
						size="icon-xs"
					>
						<ng-icon name="lucideInfo" />
					</button>
					<ng-template #tooltip>We'll use this to send you notifications</ng-template>
				</hlm-input-group-addon>
				<hlm-input-group-addon align="block-end">
					<button
						hlmInputGroupButton
						class="ml-auto"
						size="sm"
						variant="default"
						type="submit"
						[disabled]="form.invalid"
					>
						Submit
					</button>
				</hlm-input-group-addon>
			</hlm-input-group>
		</form>
	`,
})
export class InputGroupFormPreview {
	private readonly _formBuilder = inject(FormBuilder);

	public form = this._formBuilder.group({
		email: [null, [Validators.required, Validators.email]],
	});

	submit() {
		console.log(this.form.value);
	}
}

RTL

To enable RTL support in spartan-ng, see the RTL configuration guide.

١٢ نتيجة

جاري الحفظ...

import { ChangeDetectionStrategy, Component, computed, inject } from '@angular/core';
import { NgIcon, provideIcons } from '@ng-icons/core';
import { lucideSearch } from '@ng-icons/lucide';
import { TranslateService, Translations } from '@spartan-ng/app/app/shared/translate.service';
import { HlmFieldImports } from '@spartan-ng/helm/field';
import { HlmInputGroupImports } from '@spartan-ng/helm/input-group';
import { HlmSpinnerImports } from '@spartan-ng/helm/spinner';

@Component({
	selector: 'spartan-input-group-rtl',
	imports: [HlmInputGroupImports, NgIcon, HlmSpinnerImports, HlmFieldImports],
	providers: [provideIcons({ lucideSearch })],
	changeDetection: ChangeDetectionStrategy.OnPush,
	host: { class: 'grid w-full max-w-sm gap-6' },
	template: `
		<hlm-input-group [dir]="_dir()">
			<input hlmInputGroupInput [placeholder]="_t()['placeholder']" />
			<hlm-input-group-addon>
				<ng-icon name="lucideSearch" />
			</hlm-input-group-addon>
			<hlm-input-group-addon align="inline-end">{{ _t()['results'] }}</hlm-input-group-addon>
		</hlm-input-group>

		<hlm-input-group [dir]="_dir()">
			<input hlmInputGroupInput [placeholder]="_t()['searching']" />
			<hlm-input-group-addon align="inline-end">
				<hlm-spinner />
			</hlm-input-group-addon>
		</hlm-input-group>

		<hlm-input-group [dir]="_dir()">
			<input hlmInputGroupInput [placeholder]="_t()['savingChanges']" />
			<hlm-input-group-addon align="inline-end">
				<hlm-input-group-text>{{ _t()['saving'] }}</hlm-input-group-text>
				<hlm-spinner />
			</hlm-input-group-addon>
		</hlm-input-group>

		<hlm-field-group [dir]="_dir()">
			<hlm-field>
				<label hlmFieldLabel for="rtl-textarea">{{ _t()['textareaLabel'] }}</label>
				<hlm-input-group>
					<textarea hlmInputGroupTextarea id="rtl-textarea" [placeholder]="_t()['textareaPlaceholder']"></textarea>
					<hlm-input-group-addon align="block-end">
						<hlm-input-group-text>{{ _t()['characterCount'] }}</hlm-input-group-text>
						<button hlmInputGroupButton variant="default" size="sm" class="ms-auto">{{ _t()['post'] }}</button>
					</hlm-input-group-addon>
				</hlm-input-group>
			</hlm-field>
		</hlm-field-group>
	`,
})
export class InputGroupRtl {
	private readonly _language = inject(TranslateService).language;

	private readonly _translations: Translations = {
		en: {
			dir: 'ltr',
			values: {
				placeholder: 'Search...',
				results: '12 results',
				searching: 'Searching...',
				saving: 'Saving...',
				savingChanges: 'Saving changes...',
				textareaLabel: 'Textarea',
				textareaPlaceholder: 'Write a comment...',
				characterCount: '0/280',
				post: 'Post',
				textareaDescription: 'Footer positioned below the textarea.',
			},
		},
		ar: {
			dir: 'rtl',
			values: {
				placeholder: 'بحث...',
				results: '١٢ نتيجة',
				searching: 'جاري البحث...',
				saving: 'جاري الحفظ...',
				savingChanges: 'جاري حفظ التغييرات...',
				textareaLabel: 'منطقة النص',
				textareaPlaceholder: 'اكتب تعليقًا...',
				characterCount: '٠/٢٨٠',
				post: 'نشر',
				textareaDescription: 'تذييل موضع أسفل منطقة النص.',
			},
		},
		he: {
			dir: 'rtl',
			values: {
				placeholder: 'חפש...',
				results: '12 תוצאות',
				searching: 'מחפש...',
				saving: 'שומר...',
				savingChanges: 'שומר שינויים...',
				textareaLabel: 'אזור טקסט',
				textareaPlaceholder: 'כתוב תגובה...',
				characterCount: '0/280',
				post: 'פרסם',
				textareaDescription: 'כותרת תחתונה ממוקמת מתחת לאזור הטקסט.',
			},
		},
	};

	private readonly _translation = computed(() => this._translations[this._language()]);
	protected readonly _t = computed(() => this._translation().values);
	protected readonly _dir = computed(() => this._translation().dir);
}

Helm API

HlmInputGroupAddon

Selector: [hlmInputGroupAddon],hlm-input-group-addon

Inputs

Prop	Type	Default	Description
align	InputGroupAddonVariants['align']	inline-start	-

HlmInputGroupButton

Selector: button[hlmInputGroupButton]

Inputs

Prop	Type	Default	Description
size	InputGroupAddonVariants['size']	xs	-
type	'button' \| 'submit' \| 'reset'	button	-

HlmInputGroupInput

Selector: input[hlmInputGroupInput]

HlmInputGroupText

Selector: [hlmInputGroupText],hlm-input-group-text

HlmInputGroupTextarea

Selector: textarea[hlmInputGroupTextarea]

HlmInputGroup

Selector: [hlmInputGroup],hlm-input-group

Input OTP

Icon

On This Page

Stop configuring. Start shipping.

Zerops powers spartan.ng and Angular teams worldwide.

One-command deployment. Zero infrastructure headaches.

Input Group

Installation

1 Copy utils if needed

2 Copy and paste the following code into your project.

Usage

Examples

Icon

Text

Button

Kbd

Dropdown

Spinner

Textarea

Tooltip

Label

Button Group

Custom Input

Form

RTL

Helm API

HlmInputGroupAddon

Inputs

HlmInputGroupButton

Inputs

HlmInputGroupInput

HlmInputGroupText

HlmInputGroupTextarea

HlmInputGroup