When to use it.
Use visible labels, helpful validation, and enough spacing for touch and keyboard users.
Implementation notes.
- Associate every input with a visible label.
- Expose validation errors in text.
- Maintain logical keyboard order and sufficient touch target size.
Release QA
0/4Implementation checklist.
Handoff notes
Implementation notes for this component.
Quick section export
<section class="ap-settings"><h3>Account settings</h3><label class="ap-field"><span>Company name</span><input value="AblePro, Inc."></label><label class="ap-field"><span>Time zone</span><select><option>Central Time</option></select></label><label class="ap-toggle"><input type="checkbox" checked><span></span><strong>Email notifications</strong></label><footer><button>Save settings</button></footer></section>Related components