Input

Overview

NeuInput wraps a native single-line input. Its public value model belongs to the application or FormField; label, hint, size and optional icon presentation are inputs, not a validation engine.

Basic value model

Connect value to a signal and provide a label. Typing updates the signal; changing the signal updates the field.

Configurator

Configure type, size, floating label, placeholder and hint. Try interaction and validation states; the generated template follows your settings.

""

<neu-input
  [(value)]="text"
  label="Customer name"
  type="text"
  size="md"
  [floatingLabel]="true"
/>

import { signal } from '@angular/core';

export const text = signal("");

Disabled and readonly

Disabled removes the native input from keyboard focus and blocks edits. Readonly keeps it focusable and readable but blocks edits; it is not the same as disabled. These are direct component inputs here, outside FormField.

Signal Forms

Bind FormField to the control and define validation in the form schema. This example lets you edit, validate and reset the same field, including disabled and readonly states.

Signal Forms foundation · State ownership

Validation and error state

Angular's form schema decides validity; NeuInput only renders supplied invalid/errors state and an explicit errorMessage. It sets aria-invalid and links its visible error or hint through aria-describedby. The demo reveals an error message after interaction; it does not claim the component validates minLength itself.

Model ownership and events

Use [(value)] for two-way editing, or [value] with (valueChange) when you need an explicit handler. The touch event reports blur; it does not contain the field value.

Accessibility and keyboard

Core associates the label with the native field, connects hint/error text, and reflects disabled, readonly, required and invalid state. Standard text-editing keys remain native.

Your application supplies a meaningful label, validation rules and understandable errorMessage text. Use distinct inputId values when assigning IDs yourself.

Accessibility foundation

API

value supports two-way binding. touch reports blur. Inputs configure the field and the form state it displays; the tables below show their types, defaults and binding syntax.

Inputs

Configure the component with [property]="value". Your application supplies these values; the component does not replace the state you pass in.

Models

A model supports [(property)]="signal" or the [property] and (propertyChange) pair. Choose one form, not both.

Outputs

Listen to an event with (event)="handler($event)". The table explains the data your handler receives and how to use it.

Public Types

Open a type to inspect its definition and interface fields.

import type { NeuInputType } from '@neural-ui/core/input';

// Public declaration (reference only)
export type NeuInputType = 'text' | 'email' | 'password' | 'tel' | 'url' | 'search';

Theming

The public --neu-input-* tokens below customize background, border and focus treatment. Typography, radius and shared colors come from the global Core theme.

Related components

Textarea is the multiline text companion. Checkbox covers a boolean checked model with native checkbox semantics.

• Textarea
• Checkbox