Summary

To make input fields more accessible we need to keep labels always visible and highight the required fields.

Requirements

• Label text should be aligned with the input text, and always visible.
• Use the floating layout where the label is inside the text box and animates upward on focus to make room for the input value.
• Apply the green-800 token on focus.
• To indicate that a field is required, display an asterisk next to the label text.

Resources

• Figma file