Input

Stable

A familiar input, thoughtfully styled. Native behavior with a consistent look and feel.

StandaloneAccessible labelsThree sizes

Overview

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

Email address

HTMLBasic usage

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

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

Small 32 px

Medium 40 px

Large 48 px

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

Small 32 px

Email address

Medium 40 px

Email address

Large 48 px

Email address

HTMLFloating label

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

Keep the empty placeholder. Use placeholder=" " so the label can detect an empty field. Wrap one text-like input per label.

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

Company

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

TYPESCRIPTComponent setup

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

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

Make it your own. Override --av-input-focus, --av-input-border or --av-input-radius to match your theme.