Hard mode

@if ( myValueModel.invalid && (myValueModel.dirty || myValueModel.touched) ) { @if (myValueModel.errors?.['required']) {

Hard mode is required.

} @if (myValueModel.errors?.['minlength']; as minLengthError) {

Hard mode must be at least 3 characters(s).

} @if ( myValueModel.errors?.['skyCharacterCounter']; as characterCounterError ) {

Hard mode must be fewer than 10 character(s).

} }

Input

Textarea

Input with inline help

Required input with inline help and character counter

Input with inline help and overflowing text. The label should wrap while the inline help icon should stick to the top right of the input box.

Input with inline help and overflowing text. The label should wrap while the inline help icon should stick to the top right of the input box beside the character counter.

Input with inline help and overflowing text. The label should wrap while leaving margin beside the character counter.

Input with one button

Input with multiple buttons

Input left

Input right with a label with a lot of text that should wrap and cause the height of the input box to expand to fit the extra text instead of truncating it.

Form control error

Field is required.

NgModel error

Field is required.

Form control error with one button

Field is required.

Disabled

Input with one button disabled

Select

Select disabled

Wrapper

Input with left button

Input with inset button

Input with inset button (narrow)

Input with inset icon

Input with left inset icon

Disabled input with inset icon

Input W/ Placeholder