Input fields
Wide input
Wide inputs are used for longer content, typically any non-number information, such as an email address, favorite ice cream flavor, or mother’s maiden name.
To use a wide input, add the class wide to your input HTML element.
Wide input
For now, these are 302px wide. Each subsequent size is smaller by half, plus space for margin, so that they can sit side by side if needed. Click the input to see the active state.
Invalid state
The border becomes red to indicate that the user needs to fix something. A validation error will appear below the field to explain the problem.
Disabled input
Can’t type in one of these bad boys! That’s indicated by a #707070 border, at 1px width, and 0.4 opacity. If there’s placeholder content, that will also be at 0.4 opacity.
Medium input
Medium inputs are used mostly for numbers, when there are more than two numbers needed, for example: zip codes, phone numbers, or annual household income.
To use a medium input, add the class medium to your input HTML element.
These are 146px wide, which is half as wide as the wide input, plus 10px for margin. That sentence used “wide” 3 times. The error, active, and disabled states also apply to this width.
Short input
Short inputs are used for inputting content that’s 2 or fewer characters, such as how many children you have, or how many ongoing prescriptions you have.
To use a short input, add the class short to your input HTML element.
These are 68px wide, which is half the width of the medium input, plus room for a 10px margin. Just like the medium input, The error, active, and disabled states also apply to this style.
Text box
Sometimes a user has a lot more to say, for example, in the survey at the end of the medical plan recommendation flow in ALEX Benefits Counselor. In a circumstance like that, we’ll use a text box.