Input

Overview

Use avInput on a native input element. Standard attributes and Angular forms work as expected.

<label for="email">Email address</label>
<input avInput id="email" type="email"
  placeholder="you@example.com" />

Sizes

Choose the right size for your layout with avSize. Medium is the default.

Float Label

Optionally wrap your input with a floating label. It moves to the border on focus and stays there while the field has a value.

<av-float-label label="Email address">
  <input avInput type="email" placeholder=" " />
</av-float-label>

Disabled

The native disabled state works with both label styles and excludes the value from form submission.

Accessibility — WCAG 2.2 AA

A working example of a visible label, instructions and validation feedback. Try submitting an empty or incorrect email, then correct it. No data is sent.

Relevant criteria: 1.3.1 relationships, 1.3.5 input purpose, 1.4.3 text contrast, 1.4.11 non-text contrast, 2.1.1 keyboard, 2.4.7 visible focus, 3.3.1 error identification, 3.3.2 labels and instructions, 3.3.3 error suggestions, 4.1.2 name/role/value and 4.1.3 status messages.

This example is not certification of WCAG conformance. Verify the complete page, custom theme colors, zoom, focus visibility and assistive technology behavior in your application.

W3C: Labeling controls · W3C: Validation feedback

Usage

Add AvInput to your component imports. Include AvFloatLabel when using floating labels.

import { AvFloatLabel, AvInput } from 'avero-ui';

@Component({
  imports: [AvInput, AvFloatLabel],
})