form

Input

Displays a form input field. Supports various types, states, and integrates with Angular forms.

Preview

A preview of the Input component with interactive controls.

Preview Code

Interactive

Installation

Add the Input component to your project.

Bash

ng g @ng-cn/core:c input

Usage

Import and use the Input component in your Angular application.

Template TypeScript

template.html

<Input type="text" placeholder="Enter text..." />

Examples

Explore different variations and use cases for the Input component.

Basic

A simple text input with placeholder.

Preview Code

Interactive

With Label

Input with an associated label for accessibility.

Preview Code

Interactive

Input Types

Different input types for various data formats.

Preview Code

Interactive

Disabled State

Input in disabled state.

Preview Code

Interactive

With Error State

Input with error styling for validation feedback.

Preview Code

Interactive

With Icon

Input with leading or trailing icons.

Preview Code

Interactive

File Input

Styled file input for uploads.

Preview Code

Interactive

With Form Integration

Input integrated with Angular Reactive Forms.

Preview Code

Interactive

Password with Visibility Toggle

Password input with show/hide toggle.

Preview Code

Interactive

API Reference

Props

Prop	Type	Default	Description
`type`	`string`	`'text'`	The HTML input type.
`placeholder`	`string`	—	Placeholder text.
`disabled`	`boolean`	`false`	Whether the input is disabled.
`readonly`	`boolean`	`false`	Whether the input is read-only.
`class`	`string`	—	Additional CSS classes.
`id`	`string`	—	The input id for label association.
`name`	`string`	—	The input name attribute.
`value`	`string`	—	The input value.
`required`	`boolean`	`false`	Whether the input is required.