Components are in alpha

Try them out! We'd love to hear your feedback! Expect breaking changes! Become the one making those changes on GitHub!

Input

Gives an input field or a component a distinct look that indicates its input capabilities

import { Component } from '@angular/core';
import { HlmInputDirective } from '@spartan-ng/ui-input-helm';

@Component({
  selector: 'spartan-input-preview',
  standalone: true,
  imports: [HlmInputDirective],
  template: `<input class="w-80" hlmInput placeholder='Email' type='email' />`,
})
export class InputPreviewComponent {}

Installation

npx nx g @spartan-ng/nx:ui input

Usage

import { HlmInputDirective } from '@spartan-ng/ui-input-helm';

<input hlmInput/>

Examples

Default

import { Component } from '@angular/core';
import { HlmInputDirective } from '@spartan-ng/ui-input-helm';

@Component({
  selector: 'spartan-input-preview',
  standalone: true,
  imports: [HlmInputDirective],
  template: `<input class="w-80" hlmInput placeholder='Email' type='email' />`,
})
export class InputPreviewComponent {}

File

import { Component } from '@angular/core';
import { HlmInputDirective } from '@spartan-ng/ui-input-helm';

@Component({
  selector: 'spartan-input-file',
  standalone: true,
  imports: [HlmInputDirective],
  template: `<input class="w-80" hlmInput type="file"/>`,
})
export class InputFilePreviewComponent {}

Disabled

import { Component } from '@angular/core';
import { HlmInputDirective } from '@spartan-ng/ui-input-helm';

@Component({
  selector: 'spartan-input-disabled',
  standalone: true,
  imports: [HlmInputDirective],
  template: `<input class="w-80" hlmInput disabled type='email' placeholder='Email' />`,
})
export class InputDisabledPreviewComponent {}

With Label

import { Component } from '@angular/core';
import { HlmInputDirective } from '@spartan-ng/ui-input-helm';
import { HlmLabelDirective } from '@spartan-ng/ui-label-helm';

@Component({
  selector: 'spartan-input-label',
  standalone: true,
  imports: [HlmInputDirective, HlmLabelDirective],
  template: ` <label hlmLabel
    >Email
    <input class="w-80" hlmInput type="email" placeholder="Email" />
  </label>`,
})
export class InputLabelPreviewComponent {}

With Button

import { Component } from '@angular/core';
import { HlmInputDirective } from '@spartan-ng/ui-input-helm';
import { HlmLabelDirective } from '@spartan-ng/ui-label-helm';
import { HlmButtonDirective } from '@spartan-ng/ui-button-helm';

@Component({
  selector: 'spartan-input-button',
  standalone: true,
  imports: [HlmInputDirective, HlmButtonDirective],
  template: `
    <div class='flex w-full max-w-sm items-center space-x-2'>
      <input aria-label='Email' class='w-80' hlmInput type='email' placeholder='Email' />
      <button hlmBtn>Subscribe</button>
    </div>
  `,
})
export class InputButtonPreviewComponent {}

Label

Dropdown