AngularLynx

    Input

    A single-line text field with an optional label, helper text and error message.

    ui-inputsrc/app/app.ts

    Installation

    npx @blotch/dolan add input
    import { UiInput } from '../components/ui/input';

    Usage

    src/app/app.ts
    import { Component, signal } from '@angular/core';
import { UiInput } from '../components/ui/input';

@Component({
  selector: 'app-root',
  imports: [UiInput],
  template: `
    <ui-input label="Email" placeholder="you@example.com" [(value)]="email" />
  `,
})
export class App {
  protected readonly email = signal('');
}
    • [(value)] updates your signal on every keystroke. Setting the signal from code updates the field too.
    • The field shows a focus ring while it has focus.
    • class styles the whole block of label, field and message, so use it for spacing such as class="mt-4".

    Helper text and errors

    <ui-input
  label="Username"
  helperText="At least 3 characters"
  [(value)]="username"
/>
<ui-input
  label="Password"
  type="password"
  [error]="passwordError()"
  [(value)]="password"
/>
    • helperText shows small muted text under the field.
    • A non-empty error replaces the helper text with red text and turns the ring red. The field shakes when an error first appears.

    Types

    <ui-input label="Password" type="password" [(value)]="password" />

    type goes to the underlying <input> element, which takes text, number and password.

    Disabled

    <ui-input label="Account ID" value="ACC-12345" [disabled]="true" />

    A disabled field dims and ignores typing.

    Signal Forms

    UiInput implements Angular's FormValueControl, so it works with the [formField] directive of Signal Forms (see Forms).

    src/app/app.ts
    import { Component, signal } from '@angular/core';
import { form, FormField, required } from '@angular/forms/signals';
import { UiInput } from '../components/ui/input';

@Component({
  selector: 'app-root',
  imports: [FormField, UiInput],
  template: `<ui-input label="Name" [formField]="profile.name" />`,
})
export class App {
  readonly #model = signal({ name: '' });

  protected readonly profile = form(this.#model, (s) => {
    required(s.name);
  });
}

    API

    UiInput

    InputTypeDefaultDescription
    valuestring''The text. Supports [(value)].
    labelstring''Text above the field. Hidden when empty.
    placeholderstring''Hint shown while the field is empty.
    typestring'text'The <input> element's type, such as password.
    helperTextstring''Muted text under the field. Hidden while error is set.
    errorstring''Error text. Turns the ring red and shakes the field.
    disabledbooleanfalseDims the field and ignores typing.
    classstring''Extra Tailwind classes for the outer block.
    OutputTypeDescription
    valueChangestringEmits the text on every keystroke, for [(value)].
    changedstringEmits the text on every keystroke.
    focusedvoidEmits when the field gains focus.
    blurredvoidEmits when the field loses focus.
    • Textarea: a multi-line field
    • Label: a caption for other controls
    • Forms: forms and the on-screen keyboard
    • <input>: the element underneath