Input Field
Input fields should always follow these requirements:
- Identifiable Using a tappable touch target, text fields should indicate that users can enter information.
- Findable It should be easy to find a text field among other elements.
- Legible Text fields should indicate their state – whether enabled or disabled, empty or filled, valid or invalid – with clear label, input, and assistive text.
Examples
Input field
<div class="ys-input-field">
<label class="ys-input-field__label">
<span class="ys-input-field__label-text">Label for input</span>
<span class="ys-input-field__wrapper">
<input type="text" class="ys-input-field__control"/>
</span>
</label>
</div>
Input field on dark background
<div class="ys-input-field ys-input-field--light">
<label class="ys-input-field__label">
<span class="ys-input-field__label-text">Label for input</span>
<span class="ys-input-field__wrapper">
<input type="text" class="ys-input-field__control"/>
</span>
</label>
</div>
Input field with guidance text
Guidance message for input field
<div class="ys-input-field">
<label class="ys-input-field__label">
<span class="ys-input-field__label-text">Label for input</span>
<span class="ys-input-field__wrapper">
<input type="text" class="ys-input-field__control" aria-labelledby="input-guidance-id"/>
</span>
</label>
<p class="ys-input-field__guidance" id="input-guidance-id">Guidance message for input field</p>
</div>
Input field with valid input
<div class="ys-input-field">
<label class="ys-input-field__label">
<span class="ys-input-field__label-text">Label for input</span>
<span class="ys-input-field__wrapper">
<input type="text" class="ys-input-field__control" value="Valid input"/>
<span class="ys-input-field__icon ys-input-field__icon--valid">
<svg xmlns="http://www.w3.org/2000/svg" class="ys-icon" viewBox="0 0 12 10"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1.5 5.124L5.01 8.75l5.49-7.5"/></svg>
</span>
</span>
</label>
</div>
Input field with invalid input
Guidance message for input field
<div class="ys-input-field">
<label class="ys-input-field__label">
<span class="ys-input-field__label-text">Label for input</span>
<span class="ys-input-field__wrapper ys-input-field__wrapper--error">
<input type="text" class="ys-input-field__control" value="Invalid input" aria-labelledby="input-guidance-id"/>
<span class="ys-input-field__icon ys-input-field__icon--invalid">
<svg xmlns="http://www.w3.org/2000/svg" class="ys-icon" viewBox="0 0 2 12"><g fill="none" fill-rule="evenodd"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 1v6"/><path fill="currentColor" d="M2 11a1 1 0 11-2 0 1 1 0 012 0"/></g></svg>
</span>
</span>
</label>
<p class="ys-input-field__guidance ys-input-field__guidance--error" id="input-guidance-id">Guidance message for input field</p>
</div>
Disabled input field
<div class="ys-input-field">
<label class="ys-input-field__label">
<span class="ys-input-field__label-text">Label for input</span>
<span class="ys-input-field__wrapper ys-input-field__wrapper--disabled">
<input type="text" class="ys-input-field__control" disabled/>
</span>
</label>
</div>
Readonly input field
<div class="ys-input-field">
<label class="ys-input-field__label">
<span class="ys-input-field__label-text">Label for input</span>
<span class="ys-input-field__wrapper ys-input-field__wrapper--readonly">
<input type="text" class="ys-input-field__control" readonly value="Non-editable text"/>
</span>
</label>
</div>