<labelfor="tag-select"class="env-form-element__label"> Tag select </label><divclass="env-form-element__control"><selectclass="env-form-input example-tag-select"id="tag-select"multiple><optionvalue="">Select an item...</option><optionvalue="item1"selected>Item</option><optionvalue="item2">Item 2</option><optionvalue="item3">Item 3</option><optionvalue="item4">Item 4</option></select></div>
Radiobutton input element
Related radiobutton elements should be wrapped by a fieldset element to indicate group membership of the contained elements.
<fieldsetclass="env-form-element__control"><legendclass="env-form-element__label">Radio button</legend><div><labelclass="env-radio"><inputtype="radio"name="radios"value="1"checked/>
Alternative 1
</label></div><div><labelclass="env-radio"><inputtype="radio"name="radios"value="2"/>
Alternative 2
</label></div></fieldset>
<divclass="example-input-fields"><divclass="env-form-element"><labelfor="search3"class="env-form-element__label">Input search with cancel button + icon left</label><divclass="env-form-element__control env-form-element__control--icon"><svgclass="env-icon"><usehref="/sitevision/envision-icons.svg#icon-search"></use></svg><inputtype="search"class="env-form-input env-form-input--search"placeholder="Placeholder text"id="search3"/></div></div><divclass="env-form-element"><labelfor="text-2"class="env-form-element__label">Input text + icon right</label><divclass="env-form-element__control env-form-element__control--icon"><inputtype="text"class="env-form-input"placeholder="Placeholder text"id="text-2"/><svgclass="env-icon"><usehref="/sitevision/envision-icons.svg#icon-star"></use></svg></div></div></div>
Input group
Join text, input and button with env-form-input-group.
<divclass="example-input-fields"><divclass="env-form-element"><labelfor="email"class="env-form-element__label">Subscribe</label><divclass="env-form-element__control env-form-input-group"><labelfor="email"class="env-form-input-group__label">@</label><inputtype="email"class="env-form-input"placeholder="example@domain.com"id="email"/><buttontype="submit"class="env-button">Submit</button></div></div><divclass="env-form-element"><labelfor="search4"class="env-form-element__label">Search</label><divclass="env-form-element__control env-form-input-group"><inputtype="search"class="env-form-input env-form-input--search"placeholder="Search this site"id="search4"/><buttontype="submit"class="env-button env-button--primary env-button--ghost">
Go!
</button></div></div></div>
Form layouts
Common elements
.env-form
By itself the class is only a wrapper that sets the text-size-adjust property to control the text inflation for some smartphones and tablets.
May be used with modifiers .env-form--horizontal and .env-form--inline for variations in form layout.
.env-form__row
Wrap env-form-element in env-form__row to place them horizontally.
.env-form-element
Generic form input wrapper that sets spacing between elements.
.env-form-element__label
Generic label class to set style and spacing for input labels.
.env-form-element__control
Wrapper for form elements. Required for inputs with icons and a few other cases.
<formclass="env-form"action="/"><divclass="env-form__row"><divclass="env-form-element"><labelfor="form-input-1"class="env-form-element__label">Text input</label><divclass="env-form-element__control"><inputtype="text"class="env-form-input"id="form-input-1"/></div></div><divclass="env-form-element"><labelfor="form-input-2"class="env-form-element__label">Text input w. icon</label><divclass="env-form-element__control env-form-element__control--icon"><inputtype="text"class="env-form-input"id="form-input-2"/><svgclass="env-icon"><usehref="/sitevision/envision-icons.svg#icon-star"></use></svg></div></div></div><divclass="env-form-element"><buttontype="submit"class="env-button env-button--primary">
Submit
</button></div></form>
Horizontal
To create a horizontal form (horizontally align labels with input), apply modifier .env-form--horizontal to the form wrapper. The label of the element takes up 20% of the width and the .env-form-element__control uses the remaining width.
To position multiple elements on a row, wrap target elements (.env-form-element) with a .env-form__row container. Use modifer .env-form-element--* to specify the length of an element, relative to other elements on the row. Valid values 1-6. Default is 1
Use .env-form-element__help for help texts associated with a form element. The aria-describedby attribute should be used to reference the ID of the text that describes the element.
Enter a secure password
<labelfor="password"class="env-form-element__label">Password</label><divclass="env-form-element__control"><inputtype="password"class="env-form-input"id="password"aria-describedby="password-help"/></div><spanid="password-help"class="env-form-element__help">Enter a secure password</span>
States
For disabled legacy radio buttons, apply modifier .env-radio--disabled to its wrapper for a muted label.
<divclass="env-form-element"><labelfor="disabled"class="env-form-element__label">Disabled text input</label><divclass="env-form-element__control"><inputtype="text"class="env-form-input"id="disabled"placeholder="Disabled"disabled/></div></div><divclass="env-form-element"><labelfor="disabled-select"class="env-form-element__label">Disabled select</label><divclass="env-form-element__control"><selectclass="env-form-input"id="disabled-select"disabled><option>Disabled</option></select></div></div><divclass="env-form-element"><divclass="env-form-element__control"><divclass="env-checkbox env-checkbox--disabled"><inputtype="checkbox"name="options"id="cb9"checkeddisabled/><labelclass="env-form-element__label"for="cb9"><spanclass="env-checkbox__fake"></span><spanclass="env-checkbox__label">Disabled checkbox</span></label></div></div></div><divclass="env-form-element"><divclass="env-form-element__control"><labelclass="env-radio env-radio--disabled"><inputclass="env-radio"type="radio"disabledchecked/>
Disabled radio button
</label></div></div><divclass="env-form-element"><divclass="env-switch"><labelclass="env-switch__label"><inputtype="checkbox"checkeddisabled/><spanclass="env-switch__text">On disabled</span><spanclass="env-switch__slider"></span></label></div></div><divclass="env-form-element"><labelfor="readonly"class="env-form-element__label">Readonly text input</label><divclass="env-form-element__control"><inputtype="text"class="env-form-input"id="readonly"placeholder="Readonly"readonly/></div></div>
Validation
Add modifier .env-form-element--error to define error validation state. The aria-describedby attribute should be used to reference the ID of the text that describes the element.
Error validation state uses the Status color Error text.