UI forms

<div class="form-grid"><div class="field"><label class="label" for="ui-headline">Story headline</label><input class="input" id="ui-headline" name="ui-headline" type="text" placeholder="A thoughtful headline" maxlength="100"></div><div class="field"><label class="label" for="ui-email">Contact email</label><input class="input" id="ui-email" name="ui-email" type="email" placeholder="editor@example.com"></div><div class="field"><label class="label" for="ui-search">Search posts</label><input class="input" id="ui-search" name="ui-search" type="search" placeholder="Search by title"></div><div class="field"><label class="label" for="ui-pubdate">Date to publish</label><input class="input" id="ui-pubdate" name="ui-pubdate" type="date" value="2026-11-11"></div></div><small class="hint">Use .field, .label and .input for accessible form fields.</small>

<div class="form-grid"><div class="field"><label class="label" for="ui-category">Article category</label><select class="select" id="ui-category" name="ui-category"><option value="news" >News</option><option value="business" selected>Business</option><option value="culture" >Culture</option><option value="science" >Science</option></select></div><div class="field"><label class="label" for="ui-priority">Priority</label><select class="select" id="ui-priority" name="ui-priority"><option value="standard" selected>Standard</option><option value="urgent" >Breaking</option><option value="feature" >Feature</option></select></div></div><div class="field mt-4"><label class="label" for="ui-multi">Visible desks</label><select class="select" id="ui-multi" multiple size="4"><option selected>News</option><option>Business</option><option selected>Culture</option><option>Science</option></select><p class="hint">Use Ctrl / Command for multiple selections.</p></div>

<div class="form-grid"><div class="stack"><label class="check"><input type="checkbox" checked>Include in newsletter</label><label class="check"><input type="checkbox" >Feature on homepage</label><label class="check"><input type="checkbox" >Allow discussion</label></div><fieldset class="ui-fieldset"><legend class="label">Story visibility</legend><label class="check"><input type="radio" name="ui-visibility" value="public" checked>Public</label><label class="check"><input type="radio" name="ui-visibility" value="private" >Private</label><label class="check"><input type="radio" name="ui-visibility" value="scheduled" >Scheduled</label></fieldset></div>

<label class="switch nb-switch"><input id="ui-push" name="ui-push" type="checkbox" checked><span><strong>Push notifications</strong><small>Notify readers when a new edition is published.</small></span></label><label class="switch nb-switch"><input id="ui-auto-save" name="ui-auto-save" type="checkbox" checked><span><strong>Auto-save drafts</strong><small>Keep local changes while typing.</small></span></label><label class="switch nb-switch"><input id="ui-source-check" name="ui-source-check" type="checkbox" ><span><strong>Require source review</strong><small>Add a final editorial gate.</small></span></label>

<div class="field"><label class="label" for="ui-summary">Story summary</label><textarea class="textarea" id="ui-summary" name="ui-summary" maxlength="160">A closer look at the decisions reshaping the city.</textarea><p class="hint">Keep the standfirst concise and reader-focused.</p></div><span class="hint" data-count-for="#ui-summary"></span>

<div class="stack"><div class="field"><label class="label" for="ui-slug">Story URL</label><div class="input-group"><span class="input-addon">example.com/news/</span><input class="input" id="ui-slug" value="city-report"></div></div><div class="field"><label class="label" for="ui-copy">Campaign ID</label><div class="input-group"><input class="input" id="ui-copy" value="nxb-2026-edition"><button class="icon-btn input-action" type="button" data-copy-target="#ui-copy" aria-label="Copy campaign identifier"><svg class="icon" aria-hidden="true"><use href="#i-copy"/></svg></button></div></div></div>

<div class="form-grid"><div class="field"><label class="label" for="ui-valid">Valid input</label><input class="input" id="ui-valid" name="ui-valid" type="text" value="editor@example.com" aria-invalid="false"></div><div class="field"><label class="label" for="ui-invalid">Invalid input</label><input class="input" id="ui-invalid" name="ui-invalid" type="text" value="invalid@" aria-invalid="true"></div><p class="error-text">Enter a valid email address.</p><div class="field"><label class="label" for="ui-disabled">Disabled input</label><input class="input" id="ui-disabled" name="ui-disabled" type="text" value="Managed by administrator" disabled></div></div>

<div class="field"><label class="label" for="ui-password">Account password</label><div class="input-group"><input class="input" id="ui-password" name="ui-password" type="password" placeholder="Enter a password" autocomplete="new-password"><button type="button" class="icon-btn input-action" data-password-toggle aria-label="Show or hide password"><svg class="icon" aria-hidden="true"><use href="#i-eye"/></svg></button></div></div>

<div class="field"><label class="label" for="ui-upload">Upload media</label><input class="input" id="ui-upload" type="file" accept="image/png,image/jpeg,image/webp"><p class="hint" id="ui-file-name" role="status">PNG, JPEG or WebP. Maximum size in your back end is configurable.</p></div>

<div class="field"><label class="label" for="ui-range">Editorial completion <strong id="ui-range-value">64%</strong></label><input id="ui-range" type="range" min="0" max="100" value="64"><div class="progress ui-progress"><span id="ui-range-progress" style="--progress:64%"></span></div></div>

<form class="stack" id="ui-validate-form" data-validate data-success="Demo form validated" data-success-message="The sample form passed every field check." novalidate><div class="form-grid"><div class="field"><label class="label" for="ui-demo-name">Full name</label><input class="input" id="ui-demo-name" name="ui-demo-name" type="text" placeholder="Maya Chen" required minlength="2"></div><div class="field"><label class="label" for="ui-demo-email">Email address</label><input class="input" id="ui-demo-email" name="ui-demo-email" type="email" placeholder="maya@example.com" required></div></div><div class="field"><label class="label" for="ui-demo-password">Access password</label><div class="input-group"><input class="input" id="ui-demo-password" name="ui-demo-password" type="password" required minlength="8" autocomplete="new-password"><button type="button" class="icon-btn input-action" data-password-toggle aria-label="Show or hide password"><svg class="icon" aria-hidden="true"><use href="#i-eye"/></svg></button></div></div><div class="field"><label class="label" for="ui-demo-confirm">Confirm password</label><div class="input-group"><input class="input" id="ui-demo-confirm" name="ui-demo-confirm" type="password" required data-match="#ui-demo-password" autocomplete="new-password"><button type="button" class="icon-btn input-action" data-password-toggle aria-label="Show or hide password"><svg class="icon" aria-hidden="true"><use href="#i-eye"/></svg></button></div></div><label class="check"><input type="checkbox" required>Confirm I have reviewed the sample data</label><button class="btn btn-primary" type="submit"><svg class="icon" aria-hidden="true"><use href="#i-check-circle"/></svg>Validate and save</button></form>

<div class="form-grid"><div class="field"><label class="label" for="ui-sm">Compact</label><input class="input input-sm" id="ui-sm" placeholder="Compact input"></div><div class="field"><label class="label" for="ui-standard">Standard</label><input class="input" id="ui-standard" placeholder="Standard input"></div></div>