3.1 forms.base Form defaults
These are the default base styles applied to HTML form elements.
Component classes can override these styles, but if no class applies a style to an HTML form element, these styles will be the ones displayed.
Source:
base/forms/_forms.scss, line 3
3.1.1 forms.base.fieldset Fieldsets
The <fieldset> element groups a set of form fields, optionally under a
common name given by the <legend> element.
Example
Markup: base/forms/forms-fieldset.twig
<fieldset class="{{modifier_class}}">
<legend>A fieldset</legend>
<label for="fieldsetText">Text input</label>
<input type="text" id="fieldsetText" placeholder="Text input">
</fieldset>
<fieldset class="{{modifier_class}}" disabled>
<legend>A disabled fieldset</legend>
<div>
<label for="fieldsetText2">Disabled text input</label>
<input type="text" id="fieldsetText2" placeholder="Disabled input">
</div>
<div>
<label for="fieldsetSelect">Disabled select menu</label>
<select id="fieldsetSelect">
<option>Disabled select</option>
</select>
</div>
<div>
<label><input type="checkbox"> Can't check this</label>
</div>
</fieldset>
Source:
base/forms/_forms.scss, line 158
3.1.2 forms.base.input Inputs
The <input> element is mostly used for text-based inputs that include the
HTML5 types: text, search, tel, url, email, password, date,
time, number, range, color, and file.
Example
Markup: base/forms/forms-input.twig
<div>
<label for="inputText">Text</label>
<input type="text" class="{{modifier_class}}" id="inputText" placeholder="Enter some text">
</div>
<div>
<label for="inputSearch">Search</label>
<input type="search" class="{{modifier_class}}" id="inputSearch" placeholder="Search">
</div>
<div>
<label for="inputTel">Telephone</label>
<input type="text" class="{{modifier_class}}" id="inputTel" placeholder="Enter some text">
</div>
<div>
<label for="inputURL">URL</label>
<input type="url" class="{{modifier_class}}" id="inputURL" placeholder="Enter a URL">
</div>
<div>
<label for="inputEmail">Email address</label>
<input type="email" class="{{modifier_class}}" id="inputEmail" placeholder="Enter email">
</div>
<div>
<label for="inputPassword">Password</label>
<input type="password" class="{{modifier_class}}" id="inputPassword" placeholder="Password">
</div>
<div>
<label for="inputDate">Date</label>
<input type="date" class="{{modifier_class}}" id="inputDate" placeholder="Enter a date">
</div>
<div>
<label for="inputTime">Time</label>
<input type="time" class="{{modifier_class}}" id="inputTime" placeholder="Enter a time">
</div>
<div>
<label for="inputNumber">Number</label>
<input type="number" class="{{modifier_class}}" id="inputNumber" placeholder="Enter a number">
</div>
<div>
<label for="inputRange">Range</label>
<input type="range" class="{{modifier_class}}" id="inputRange" placeholder="Enter a range">
</div>
<div>
<label for="inputColor">Color</label>
<input type="color" class="{{modifier_class}}" id="inputColor" placeholder="Enter a color">
</div>
<div>
<label for="inputFile">File input</label>
<input type="file" class="{{modifier_class}}" id="inputFile">
</div>
<div>
<label for="inputText">Disabled text</label>
<input type="text" class="{{modifier_class}}" disabled id="inputText" placeholder="Disabled text">
</div>
<div>
<label for="inputSearch">Disabled search</label>
<input type="search" class="{{modifier_class}}" disabled id="inputSearch" placeholder="Disabled search">
</div>
<div>
<label for="inputTel">Disabled telephone</label>
<input type="text" class="{{modifier_class}}" disabled id="inputTel" placeholder="Disabled telephone">
</div>
<div>
<label for="inputURL">Disabled URL</label>
<input type="url" class="{{modifier_class}}" disabled id="inputURL" placeholder="Disabled URL">
</div>
<div>
<label for="inputEmail">Disabled email address</label>
<input type="email" class="{{modifier_class}}" disabled id="inputEmail" placeholder="Disabled email">
</div>
<div>
<label for="inputPassword">Disabled password</label>
<input type="password" class="{{modifier_class}}" disabled id="inputPassword" placeholder="Disabled password">
</div>
<div>
<label for="inputDate">Disabled date</label>
<input type="date" class="{{modifier_class}}" disabled id="inputDate" placeholder="Disabled date">
</div>
<div>
<label for="inputTime">Disabled time</label>
<input type="time" class="{{modifier_class}}" disabled id="inputTime" placeholder="Disabled time">
</div>
<div>
<label for="inputNumber">Disabled number</label>
<input type="number" class="{{modifier_class}}" disabled id="inputNumber" placeholder="Disabled number">
</div>
<div>
<label for="inputRange">Disabled range</label>
<input type="range" class="{{modifier_class}}" disabled id="inputRange" placeholder="Disabled range">
</div>
<div>
<label for="inputColor">Disabled color</label>
<input type="color" class="{{modifier_class}}" disabled id="inputColor" placeholder="Disabled color">
</div>
<div>
<label for="inputFile">Disabled file input</label>
<input type="file" class="{{modifier_class}}" disabled id="inputFile">
</div>
Source:
base/forms/_forms.scss, line 92
3.1.3 forms.base.input-checkbox Checkboxes
If an <input> element has the type='checkbox' attribute set, the form
field is displayed as a checkbox.
It's recommended that you don't attempt to style these elements. Firefox's
implementation doesn't respect box-sizing, padding, or width.
Example
Markup: base/forms/forms-input-checkbox.twig
<div>
<label><input type="checkbox" class="{{modifier_class}}"> Check me out</label>
</div>
<div>
<label><input type="checkbox" class="{{modifier_class}}" value="" disabled> Option two is disabled</label>
</div>
Source:
base/forms/_forms.scss, line 126
3.1.4 forms.base.input-radio Radio buttons
If an <input> element has the type='radio' attribute set, the form field
is displayed as a radio button.
It's recommended that you don't attempt to style these elements. Firefox's
implementation doesn't respect box-sizing, padding, or width.
Example
Markup: base/forms/forms-input-radio.twig
<div>
<label><input type="radio" class="{{modifier_class}}" value="option1" name="example-radio" checked> Option one</label>
</div>
<div>
<label><input type="radio" class="{{modifier_class}}" value="option2" name="example-radio"> Option two</label>
</div>
<div>
<label><input type="radio" class="{{modifier_class}}" value="option3" name="example-radio" disabled> Option three is disabled</label>
</div>
Source:
base/forms/_forms.scss, line 138
3.1.5 forms.base.label Labels
The <label> element represents a caption of a form field. The label can be
associated with a specific form control by using the for attribute or by
putting the form control inside the label element itself.
Example
Markup: base/forms/forms-label.twig
<div>
<label class="{{modifier_class}}" for="lableInputText">A label for a text input</label>
<input type="text" id="lableInputText" placeholder="Enter some text">
</div>
<div>
<label class="{{modifier_class}}"><input type="checkbox"> A label wrapped around a checkbox</label>
</div>
Source:
base/forms/_forms.scss, line 188
3.1.6 forms.base.select Select list
The <select> element represents a form field for selecting amongst a set of
options.
Known limitation: by default, Chrome and Safari on OS X allow very limited
styling of <select>, unless a border property is set.
Example
Markup: base/forms/forms-select.twig
<div>
<label for="selectDropdown">A standard drop-down</label>
<select class="{{modifier_class}}" id="selectDropdown">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
<optgroup label="More options">
<option>Option 4</option>
<option>Option 5</option>
</optgroup>
</select>
</div>
<div>
<label for="selectMultiItem">A multi-item select field</label>
<select class="{{modifier_class}}" id="selectMultiItem" multiple>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
<optgroup label="More options">
<option>Option 4</option>
<option>Option 5</option>
</optgroup>
</select>
</div>
<div>
<label for="selectDisabled">A disabled drop-down</label>
<select class="{{modifier_class}}" id="selectDisabled" disabled>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
<optgroup label="More options">
<option>Option 4</option>
<option>Option 5</option>
</optgroup>
</select>
</div>
Source:
base/forms/_forms.scss, line 204
3.1.7 forms.base.textarea Text areas
The <textarea> element represents a multi-line plain text form field.
Example
Markup: base/forms/forms-textarea.twig
<div>
<label for="exampleTextarea">Text area</label>
<textarea class="{{modifier_class}}" rows="3" id="exampleTextarea"></textarea>
</div>
<div>
<label for="exampleTextarea">Disabled text area</label>
<textarea class="{{modifier_class}}" rows="3" id="exampleTextarea" disabled></textarea>
</div>
Source:
base/forms/_forms.scss, line 225