Input
Gives an input field or a component a distinct look that indicates its input capabilities
import { Component } from '@angular/core';
import { HlmInput } from '@spartan-ng/helm/input';
@Component({
selector: 'spartan-input-preview',
imports: [HlmInput],
template: `
<input class="w-80" hlmInput type="email" placeholder="Email" />
`,
})
export class InputPreview {}Installation
npx nx g @spartan-ng/cli:ui input
ng g @spartan-ng/cli:ui input
Usage
import { HlmInput } from '@spartan-ng/helm/input';<input hlmInput/>Helm API
HlmInputError
Selector: [hlmInputError]
Inputs
| Prop | Type | Default | Description |
|---|---|---|---|
| class | ClassValue | - | - |
HlmInput
Selector: [hlmInput]
Inputs
| Prop | Type | Default | Description |
|---|---|---|---|
| error | InputVariants['error'] | auto | - |
| class | ClassValue | - | - |
Examples
File
import { Component } from '@angular/core';
import { HlmInput } from '@spartan-ng/helm/input';
@Component({
selector: 'spartan-input-file',
imports: [HlmInput],
template: `
<input class="w-80" hlmInput type="file" />
`,
})
export class InputFilePreview {}Disabled
import { Component } from '@angular/core';
import { HlmInput } from '@spartan-ng/helm/input';
@Component({
selector: 'spartan-input-disabled',
imports: [HlmInput],
template: `
<input class="w-80" hlmInput disabled type="email" placeholder="Email" />
`,
})
export class InputDisabledPreview {}With Label
import { Component } from '@angular/core';
import { HlmInput } from '@spartan-ng/helm/input';
import { HlmLabel } from '@spartan-ng/helm/label';
@Component({
selector: 'spartan-input-label',
imports: [HlmInput, HlmLabel],
template: `
<div class="grid w-full max-w-sm items-center gap-3">
<label for="email" hlmLabel>Email</label>
<input hlmInput type="email" id="email" placeholder="Email" />
</div>
`,
})
export class InputLabelPreview {}With Button
import { Component } from '@angular/core';
import { HlmButton } from '@spartan-ng/helm/button';
import { HlmInput } from '@spartan-ng/helm/input';
@Component({
selector: 'spartan-input-button',
imports: [HlmInput, HlmButton],
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 variant="outline">Subscribe</button>
</div>
`,
})
export class InputButtonPreview {}