GET STARTED

Import

Import the standalone directive from its granular entry point.

import { NeuralInput } from '@neural-ng/core/input';

@Component({
  imports: [NeuralInput],
  // ...
})

NATIVE FIRST

Basic input

neuralInput enhances the real input. Labels, browser validation, autofill, form submission and native events remain intact.

Start and end icons

NeuralInputGroup places decorative icons at logical start and end while the projected control remains the real native input.

Native text types

Text, email, password, search, telephone and URL retain their browser-specific behavior and mobile keyboards.

Visual sizes

inputSize controls visual density without hijacking the native HTML size attribute.

Visual variants

Outlined is explicit; filled creates a quieter surface while preserving the same focus and validation contract.

Native states

Readonly values remain selectable and submitted. Disabled controls leave form submission. Invalid state is exposed only when the application declares it.

Angular Forms integration

The directive stays on the native control, so it needs no custom ControlValueAccessor. Template-driven Forms, Reactive Forms and Signal Forms all bind through Angular's own native input accessors.

Fluid width

The default follows native inline sizing. Fluid fills its available container and can also inherit from Neural Field.

Unstyled and direct classes

There is no inputClass: the host is already the native input. Normal class bindings work directly, while unstyled removes every NeuralNg visual class.

Directive

Inputs

InputGroup

Optional visual composition around the unchanged native input.

Methods

Native API remains public

Attributes such as type, name, value, autocomplete, inputmode, minlength, maxlength, pattern, required, readonly and disabled stay on the input. Listen to native input, change, focus and blur events without NeuralNg aliases.

Design tokens

Override tokens locally, at a product boundary or through a generated Neural theme.