form-layout
Arrange native fieldsets and existing Field patterns into responsive columns. Native validation and AngularTS forms remain the authoritative form model.
Example
View source
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>AngularCSS Form Layout</title>
<link rel="stylesheet" href="../../css/preflight.css" />
<link rel="stylesheet" href="../../css/angular.css" />
<link rel="stylesheet" href="../example.css" />
<script src="../../js/angular-ts.umd.js"></script>
<script src="../../js/angular-css.umd.js"></script>
</head>
<body ng-app="angular.css" ng-cloak data-example="form-layout-demo">
<form
class="form-layout visual-example"
name="customerForm"
novalidate
ng-submit="saved=customerForm.valid"
>
<header>
<h2>Create customer</h2>
<p>Fields marked as required must be completed.</p>
</header>
<aside
role="alert"
ng-if="customerForm.submitted && customerForm.invalid"
>
<header><h3>Check the customer details</h3></header>
<ul>
<li><a href="#form-layout-name">Enter a customer name.</a></li>
</ul>
</aside>
<fieldset>
<legend>Customer details</legend>
<div class="field">
<label for="form-layout-name">Customer name</label>
<input
id="form-layout-name"
name="customerName"
required
ng-model="customer.name"
/>
</div>
<div class="field">
<label for="form-layout-email">Email</label>
<input
id="form-layout-email"
type="email"
name="email"
ng-model="customer.email"
/>
</div>
<div class="field">
<label for="form-layout-region">Region</label>
<select
id="form-layout-region"
name="region"
ng-model="customer.region"
>
<option value="">Choose a region</option>
<option>Europe</option>
<option>Americas</option>
</select>
</div>
<div class="field">
<label for="form-layout-reference">Reference</label>
<input
id="form-layout-reference"
name="reference"
ng-model="customer.reference"
/>
</div>
</fieldset>
<footer>
<button variant="outline" type="reset">Cancel</button>
<button type="submit">Create customer</button>
</footer>
<output aria-live="polite" ng-if="saved"
>Customer is ready to save.</output
>
</form>
</body>
</html>
Installation
Load the AngularCSS stylesheet. This entry needs no AngularCSS JavaScript or angular.css module dependency. Add AngularTS when using application bindings such as ng-model or ng-click. See Installation for the complete setup.
This entry uses native HTML and CSS. AngularCSS registers no runtime directive for it. Responsive native form and field composition.
Anatomy
Root styling selector
form.form-layout
Semantic structure
Apply .form-layout to a native form containing semantic headers, fieldsets, Field patterns, an optional Validation Summary, and a footer. No form-layout part classes are required.
API
Attributes and state
| Attribute | Access | Purpose |
|---|---|---|
columns | Authored | Preferred desktop column count: 1, 2, or 3. |
Attributes remain authored HTML, native state, or AngularTS inputs. AngularCSS does not write element state.
CSS custom properties
This styling hook does not define component-specific CSS custom properties.
DOM events
This component does not emit a component-specific custom event.
Native DOM events continue to work normally. AngularTS event directives such as
ng-click and ng-keydown, plus the data-change model callback, remain application-owned.
Behavior
Form Layout arranges native fieldsets and Field patterns. Native validation and AngularTS forms remain authoritative for values, errors, submission, and server responses.
AngularCSS does not replace AngularTS interpolation, bindings, structural directives, form controllers, validation, or application state.
Accessibility
Preserve DOM and focus order as the layout changes columns. Group related controls with fieldset and legend, connect errors to controls, and place a Validation Summary before invalid fields.
Authored accessible names and relationships are preserved. Test the final composition with keyboard navigation and assistive technology because labels and content come from the application.
Customization
Target semantic elements, native state selectors, and component classes with ordinary CSS. Behavior and accessible state remain with native HTML and AngularTS; visual choices belong in the application stylesheet.
Read Customization for layer order, design tokens, state variants, and iframe demo isolation.
Feedback
Was this page helpful?
Glad to hear it! Please tell us how we can improve.
Sorry to hear that. Please tell us how we can improve.