Form

Available modifiers

Align labels to the right on the left side of the input fields

form--right-aligned-labels

Align labels to the left on the left side of the input fields

form--left-aligned-labels

Align labels above the input fields, can be used to reset other form modifiers when nesting forms (for example in a popover)

form--top-aligned-labels

Align actions inline

form--inlined-actions

Structure

form (modifier)
├── form__section
│	├── form__section-header (optional)
│	│	├── form__section-title (optional)
│	│	├── form__section-feedback-text (optional)
│	├── form__fieldset
│	│	├── form__fieldset-header (optional)
│	│	│	├── form__fieldset-title (optional)
│	│	│	├── form__fieldset-supporting-text (optional)
│	│	│	├── form__fieldset-feedback-text (optional)
│	│	├── form__field
│	│	│	├── form__field-header
│	│	│	│	├── form__field-label
│	│	│	│	│	├── form__field-supporting-text (optional)
│	│	│	├── form__field-main
│	│	│	│	├── form__field-section
│	│	│	│	│	├── other BEM component (e.g. text-input or content)
│	│	│	│	│	├── form__input-helper-text (optional)
│	│	│	│	│	├── form__input-feedback-text (optional)
├── form__footer (modifier)
│	├── form__actions (modifier)
│	│	├── form__action (modifier)

Example HTML

A simple form with labels above the input fields (default).

Personal info form

A form with labels on the left side of the form and right aligned labels.

<form class="form form--right-aligned-labels">
	<div class="form__section">
		<div class="form__fieldset">
			<div class="form__field">
				<label class="form__field-header"
					for="given-name"
				>
					<span class="form__field-label">
						Given name
					</span>
				</label>
				<div class="form__field-main">
					<div class="form__field-section">
						<input class="text-input"
							id="given-name"
							name="given-name"
							type="text"
							autocapitalize="none"
							autocomplete="given-name"
							autocorrect="off"
							spellcheck="false"
							required
						>
					</div>
				</div>
			</div>
			<div class="form__field">
				<label class="form__field-header"
					for="family-name"
				>
					<span class="form__field-label">
						Family name
					</span>
				</label>
				<div class="form__field-main">
					<div class="form__field-section">
						<input class="text-input"
							id="family-name"
							name="family-name"
							type="text"
							autocapitalize="none"
							autocomplete="family-name"
							autocorrect="off"
							spellcheck="false"
							required
						>
					</div>
				</div>
			</div>
		</div>
		<div class="form__fieldset">
			<div class="form__field">
				<label class="form__field-header"
					for="street-address"
				>
					<span class="form__field-label">
						Street and house number
					</span>
				</label>
				<div class="form__field-main">
					<div class="form__field-section">
						<input class="text-input"
							id="street-address"
							name="street-address"
							type="text"
							autocapitalize="off"
							autocomplete="street-address"
							autocorrect="off"
							spellcheck="false"
							required
						>
					</div>
				</div>
			</div>
			<div class="form__field">
				<label class="form__field-header"
					for="postal-code"
				>
					<span class="form__field-label">
						Postal code
					</span>
				</label>
				<div class="form__field-main">
					<div class="form__field-section">
						<input class="text-input text-input--max-width-80"
							id="postal-code"
							name="postal-code"
							type="text"
							autocapitalize="characters"
							autocomplete="postal-code"
							autocorrect="off"
							spellcheck="false"
							required
						>
					</div>
				</div>
			</div>
			<div class="form__field">
				<label class="form__field-header"
					for="city"
				>
					<span class="form__field-label">
						City
					</span>
				</label>
				<div class="form__field-main">
					<div class="form__field-section form__field-section--text-input">
						<input class="text-input"
							id="city"
							name="city"
							type="text"
							autocapitalize="on"
							autocorrect="on"
							autocomplete="address-level2"
							spellcheck="true"
							required
						>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="form__footer">
		<div class="form__actions">
			<div class="form__action">
				<button class="button button--full button--primary"
					type="submit"
				>
					Submit
				</button>
			</div>
		</div>
	</div>
</form>

Advanced form

A default form with multiple sections, helper text, a extra field sections including content and feedback text.

<form class="form">
	<div class="form__section">
		<div class="form__fieldset">
			<div class="form__field">
				<label class="form__field-header"
					for="advanced-form-label-1"
				>
					<span class="form__field-label">
						Label 1
						<span class="form__field-supporting-text">Field supporting text</span>
					</span>
				</label>
				<div class="form__field-main">
					<div class="form__field-section">
						<input class="text-input"
							id="advanced-form-label-1"
							name="advanced-form-label-1"
							type="text"
						>
						<p class="form__input-helper-text">
							Label 1 helper text
						</p>
					</div>
				</div>
			</div>
			<div class="form__field">
				<label class="form__field-header"
					for="advanced-form-label-2"
				>
					<span class="form__field-label">
						Label 2
					</span>
				</label>
				<div class="form__field-main">
					<div class="form__field-section">
						<input class="text-input"
							id="advanced-form-label-2"
							name="advanced-form-label-2"
							type="text"
						>
					</div>
					<div class="form__field-section">
						<div class="content content--90">
							<p>A form section with a content component.</p>
							<ul>
								<li>Example 1</li>
								<li>Example 2</li>
								<li>Example 3</li>
							</ul>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="form__section">
		<div class="form__fieldset">
			<div class="form__field">
				<label class="form__field-header"
					for="advanced-form-label-3"
				>
					<span class="form__field-label">
						Label 3
					</span>
				</label>
				<div class="form__field-main">
					<div class="form__field-section">
						<input class="text-input is-invalid"
							id="advanced-form-label-3"
							name="advanced-form-label-3"
							type="text"
						>
						<label class="form__input-feedback-text"
							for="advanced-form-label-3"
						>
							You must enter a label 3
						</label>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="form__footer">
		<div class="form__actions">
			<div class="form__action">
				<button class="button button--primary"
					type="submit"
				>
					Submit
				</button>
			</div>
			<div class="form__action">
				<a class="link"
					href="#"
				>
					Previous step
				</a>
			</div>
		</div>
	</div>
</form>

Left aligned labels and inlined actions

A form with labels aligned on the left side of the form. Can be used for example in edit mode to enable scannability of the labels.

Components

Controls

Layouts

Variables

Form

Available modifiers

Structure

Example HTML

Personal info form

Advanced form

Left aligned labels and inlined actions

Components

Controls

Layouts

Variables

Form

Available modifiers

Structure

Example HTML

Login form

Personal info form

Advanced form

Left aligned labels and inlined actions