Form

Input

A single-line text field. Always pair with a Label — never rely on placeholders alone.

Default

Player Name

The invalid prop (or aria-invalid) applies a red border and exposes the invalid state to assistive tech.

Please enter a valid email.

Always wire htmlFor on the Label to idon the Input. Without the pairing, screen readers won't announce the field's purpose.
Use aria-describedby to point to a sibling element with the validation message. Combine with aria-invalid for assistive-tech-friendly errors.
The focus outline uses the accent token, giving 3:1+ contrast against every theme surface.