Primitives

Input

The input primitive can be used to enhance the accessibility of an input element and provide consistent interaction handling for hover, focus, press and autofill states.

import { Component } from "@angular/core";
import { NgpInput } from "ng-primitives/input";

@Component({
  selector: "app-input",
  imports: [NgpInput],
  template: `
    <input ngpInput type="text" placeholder="Enter your full name" />
  `,
  styles: `
    :host {
      display: contents;
    }

    [ngpInput] {
      height: 36px;
      width: 100%;
      border-radius: 8px;
      padding: 0 16px;
      border: none;
      box-shadow: var(--ngp-input-shadow);
      outline: none;
    }

    [ngpInput]:focus {
      outline: 2px solid var(--ngp-focus-ring);
      outline-offset: 2px;
    }

    [ngpInput]::placeholder {
      color: var(--ngp-text-placeholder);
    }
  `,
})
export default class InputExample {}

Import

Import the Input primitives from ng-primitives/input.

import { NgpInput } from 'ng-primitives/input';

Usage

Assemble the input directives in your template.

<input ngpInput type="text" />

Reusable Component

Create an input component that uses the NgpInput directive.

import { Component } from '@angular/core';
import { Input } from './input';

@Component({
  selector: 'app-root',
  imports: [Input],
  template: '<input app-input type="text" placeholder="Enter text" />',
})
export default class App {}

Schematics

Generate a reusable input component using the Angular CLI.

ng g ng-primitives:primitive input

Options

path: The path at which to create the component file.
prefix: The prefix to apply to the generated component selector.
componentSuffix: The suffix to apply to the generated component class name.
fileSuffix: The suffix to apply to the generated component file name. Defaults to component.
exampleStyles: Whether to include example styles in the generated component file. Defaults to true.

Examples

Here are some additional examples of how to use the Input primitive.

Input Form Field

The input automatically integrates with the form field primitives.

Email address

We'll never share your email with anyone else, unless they pay us.

import { Component } from "@angular/core";
import {
  NgpDescription,
  NgpFormField,
  NgpLabel,
} from "ng-primitives/form-field";
import { NgpInput } from "ng-primitives/input";

@Component({
  selector: "app-input-form-field",
  imports: [NgpInput, NgpLabel, NgpDescription, NgpFormField],
  template: `
    <div ngpFormField>
      <label ngpLabel>Email address</label>
      <p ngpDescription>
        We'll never share your email with anyone else, unless they pay us.
      </p>
      <input ngpInput type="email" placeholder="Enter your email address" />
    </div>
  `,
  styles: `
    :host {
      display: contents;
    }

    [ngpFormField] {
      display: flex;
      flex-direction: column;
      gap: 6px;
      width: 90%;
    }

    [ngpInput] {
      height: 36px;
      width: 100%;
      border-radius: 8px;
      padding: 0 16px;
      border: none;
      box-shadow: var(--ngp-input-shadow);
      outline: none;
    }

    [ngpInput]:focus {
      outline: 2px solid var(--ngp-focus-ring);
      outline-offset: 2px;
    }

    [ngpInput]::placeholder {
      color: var(--ngp-text-placeholder);
    }

    [ngpLabel] {
      color: var(--ngp-text-primary);
      font-size: 0.875rem;
      line-height: 1.25rem;
      font-weight: 500;
      margin: 0;
    }

    [ngpDescription] {
      color: var(--ngp-text-secondary);
      font-size: 0.75rem;
      line-height: 1rem;
      margin: 0 0 4px;
    }
  `,
})
export default class InputFormFieldExample {}

API Reference

The following directives are available to import from the ng-primitives/input package:

NgpInput

Selector: input[ngpInput]
Exported As: ngpInput

disabled

boolean

Whether the element is disabled.

Data Attributes

The following data attributes are applied to the ngpInput directive:

Attribute	Description
`data-hover`	Applied to the input when hovered.
`data-focus`	Applied to the input when focused.
`data-disabled`	Applied to the input when disabled.
`data-autofill`	Applied to the input when autofilled.

Getting Started