Form
The complete form system: fields, textual inputs, custom checks, states, sizes, upload and actions. This page covers the static markup — for live validation see Form validation (JS).
Every control lives in a ng-field wrapper: a ng-label, the input and an optional ng-help. The wrapper drives spacing, inline layout and the error/success states.
Field anatomy
ng-label-required appends the red asterisk automatically.
<form class="ng-form">
<div class="ng-field mb-16">
<label class="ng-label ng-label-required" for="f-name">Full name</label>
<input type="text" class="ng-input" id="f-name" placeholder="Jane Doe">
<div class="ng-help">As printed on your ID.</div>
</div>
<div class="ng-field">
<label class="ng-label" for="f-company">Company</label>
<input type="text" class="ng-input" id="f-company" placeholder="Acme Inc.">
<div class="ng-help">Optional.</div>
</div>
</form>Textual inputs
ng-input, ng-select and ng-textarea share the same core: border, focus ring, disabled state and placeholder colour all come from the --ng-input-* tokens.
<div class="ng-field mb-16">
<label class="ng-label" for="f-text">Text</label>
<input type="text" class="ng-input" id="f-text" placeholder="Type here">
</div>
<div class="ng-field mb-16">
<label class="ng-label" for="f-select">Select</label>
<select class="ng-select" id="f-select">
<option>Option one</option>
<option>Option two</option>
</select>
</div>
<div class="ng-field">
<label class="ng-label" for="f-area">Textarea</label>
<textarea class="ng-textarea" id="f-area" rows="3" placeholder="Your message"></textarea>
</div>Checkbox & radio
The ng-check wrapper aligns a native control with its text.
<label class="ng-check">
<input type="checkbox" checked> Native checkbox
</label>
<label class="ng-check">
<input type="radio" name="nat" checked> Native radio
</label>
<label class="ng-check">
<input type="radio" name="nat"> Native radio
</label>Custom — ng-check-nexi
The branded control: the input is visually replaced by a ng-check-box span. Two looks, classic and bolder; radios become round automatically.
<label class="ng-check-nexi classic">
<input type="checkbox" checked>
<span class="ng-check-box"></span> Classic checkbox
</label>
<label class="ng-check-nexi classic">
<input type="radio" name="nx" checked>
<span class="ng-check-box"></span> Classic radio
</label>
<label class="ng-check-nexi bolder">
<input type="checkbox" checked>
<span class="ng-check-box"></span> Bolder checkbox
</label>
<label class="ng-check-nexi bolder">
<input type="radio" name="nxb" checked>
<span class="ng-check-box"></span> Bolder radio
</label>Inline fields
Add ng-field-inline to lay label and control on one row. ng-inline-full makes a child (e.g. the help) take the full width below.
<div class="ng-field ng-field-inline">
<label class="ng-label" for="f-inline">Email</label>
<input type="email" class="ng-input" id="f-inline" placeholder="jane@example.com">
<div class="ng-help ng-inline-full">Label and input on one row; the help spans the full width.</div>
</div>States
ng-field-error and ng-field-success recolour the border (and the help, on error). The validation script applies them for you.
<div class="ng-field ng-field-error mb-16">
<label class="ng-label" for="f-err">Email</label>
<input type="email" class="ng-input" id="f-err" value="not-an-email">
<div class="ng-help">Please enter a valid email address.</div>
</div>
<div class="ng-field ng-field-success">
<label class="ng-label" for="f-ok">Username</label>
<input type="text" class="ng-input" id="f-ok" value="jane">
</div>Sizes
-sm and -lg suffixes on each control: ng-input-sm, ng-select-lg, ng-textarea-sm…
<div class="ng-field mb-16">
<input type="text" class="ng-input ng-input-sm" placeholder="Small">
</div>
<div class="ng-field mb-16">
<input type="text" class="ng-input" placeholder="Medium (default)">
</div>
<div class="ng-field">
<input type="text" class="ng-input ng-input-lg" placeholder="Large">
</div>Underline style
Opt-in signature look: ng-form-underline on the form switches every field to a bottom-border style (or ng-field-underline per single field).
<form class="ng-form ng-form-underline">
<div class="ng-field mb-16">
<label class="ng-label" for="f-u1">Name</label>
<input type="text" class="ng-input" id="f-u1" placeholder="Underline style">
</div>
<div class="ng-field">
<label class="ng-label" for="f-u2">Company</label>
<input type="text" class="ng-input" id="f-u2" placeholder="Applies to every field">
</div>
</form>Upload
A click/drop area wrapping a hidden file input. ng-upload-list / ng-upload-item style the selected-files list.
<div class="ng-field">
<label class="ng-label">Attachment</label>
<label class="ng-upload">
<input type="file" class="ng-upload-input">
<span class="ng-upload-drop">
<i class="ph ph-upload-simple fs-2xl"></i>
<span class="ng-upload-text">Click or drop a file here</span>
</span>
</label>
</div>Form actions
ng-form-actions rows the submit/cancel buttons, with alignment modifiers (top-left … bottom-right).
<form class="ng-form">
<div class="ng-field mb-16">
<label class="ng-label" for="f-act">Name</label>
<input type="text" class="ng-input" id="f-act">
</div>
<div class="ng-form-actions">
<button type="button" class="ng-btn ng-btn-mute-soft">Cancel</button>
<button type="submit" class="ng-btn ng-btn-primary">Save</button>
</div>
</form>Anatomy
ng-form ng-field ng-label ng-label-required ng-input ng-select ng-textarea ng-help ng-check ng-check-nexi ng-check-box ng-upload ng-upload-input ng-upload-drop ng-upload-text ng-upload-list ng-upload-item ng-form-actions Modifiers & states
ng-field-inline ng-inline-full ng-field-error ng-field-success ng-input-sm ng-input-lg ng-select-sm ng-select-lg ng-textarea-sm ng-textarea-lg ng-form-underline ng-field-underline classic bolder is-uppercase Reference
Generated from the component source (_ng_form.scss · ng_form.js).
Component info
| Name | form |
|---|---|
| Type | css+js |
| Version | css 1.1.0 · js 1.2.0 |
| Status | stable |
| CSS | /assets/css/components/_ng_form.scss |
| JS | /assets/js/ng_form.js |
Classes
.ng-check .ng-check-box .ng-check-nexi .ng-count .ng-field .ng-field-error .ng-field-inline .ng-field-success .ng-field-underline .ng-field-warning .ng-form .ng-form-actions .ng-form-underline .ng-help .ng-inline-full .ng-input .ng-input-lg .ng-input-sm .ng-label .ng-label-required .ng-select .ng-select-lg .ng-select-sm .ng-summary-label .ng-summary-value .ng-textarea .ng-textarea-lg .ng-textarea-sm .ng-upload .ng-upload-drop .ng-upload-input .ng-upload-item .ng-upload-list .ng-upload-text Tokens
--ng-check-color --ng-count-bg --ng-count-color --ng-field-gap --ng-form-gap --ng-form-help-color --ng-form-label-color --ng-form-label-size --ng-form-label-weight --ng-input-color-border --ng-input-disabled-bg --ng-input-disabled-color --ng-input-font-size --ng-input-line-height --ng-input-padding-x --ng-input-padding-y --ng-input-placeholder --ng-label-margin Events
ng:form:password-toggle