angular / angular/components

[Mat-Form-Field] label/placeholder shake animation on input error

Open
#16,634 4 comments 3 reactions 0 assignees View on GitHub
area: material/form-field feature P4
Dominant language
TypeScript
Stars
25k
Forks
6.8k
Avg merge
1d 8h
Merged PRs (30d)
91

Description

#### Feature Description

See the example in the official docs:
- [Material Design - Text Fields - Anatomy](https://material.io/design/components/text-fields.html#anatomy) > Assistive Elements > Error Text
- [Direct link to video example](https://storage.googleapis.com/spec-host/mio-staging%2Fmio-design%2F1563837804615%2Fassets%2F1-aJCEgnpvxTuvtYshKU7BuVV4EdPatjE%2Ftextfields-anatomy-error.mp4)

In a form field, on error, the label/placeholder lightly shakes (left and right) as it turns red.

#### Use Case

This will enhance form field UX by subtly grabbing user attention for errors during form field entry

Contributor guide

Open the contributing guide

Research direction

No implementation files or tests are named. Start by locating the Angular Material form-field component and reproduce its error state while comparing it with the linked Material Design example; done means the label or placeholder lightly shakes left and right as it turns red.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, typescript
Domain
design, frontend
Issue type
Feature
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.