2.2 #Molecules.Checkbox Checkbox
Custom checkboxes for the forms.
Example
Markup: scss/styleguide/molecules/checkbox/checkbox.html
<div class="container app-body">
<div class="row">
<div class="col-lg-7 form__container">
<form>
<div class="form-checkboxes">
<div class="form-type-checkbox">
<input type="checkbox" id="custom-checkbox1" name="custom-checkboxes" aria-checked="false">
<label for="custom-checkbox1" class="option">This is a custom checkbox</label>
</div>
<div class="form-type-checkbox">
<input type="checkbox" id="custom-checkbox2" name="custom-checkboxes" aria-checked="false">
<label for="custom-checkbox2" class="option">This is a custom checkbox</label>
</div>
</div>
</form>
</div>
</div>
</div>
Source:
../client/scss/styleguide/molecules/checkbox/_checbox.scss, line 1
2.3 #Molecules.Radio Radio
Custom radio buttons for the forms.
Example
Markup: scss/styleguide/molecules/radio/radio.html
<div class="container app-body">
<div class="row">
<div class="col-lg-7 form__container">
<form>
<div class="form-radios">
<div class="form-type-radio">
<input type="radio" id="custom-radio1" name="custom-radios">
<label for="custom-radio1" class="option">This is a custom radio</label>
</div>
<div class="form-type-radio">
<input type="radio" id="custom-radio2" name="custom-radios">
<label for="custom-radio2" class="option">This is a custom radio</label>
</div>
</div>
</form>
</div>
</div>
</div>
Source:
../client/scss/styleguide/molecules/radio/_radio.scss, line 1
2.4 #Molecules.Select Select
Custom select fields for the forms.
Example
Markup: scss/styleguide/molecules/select/select.html
<div class="container app-body" style="min-height: 200px;">
<div class="row">
<div class="col-lg-7 form__container">
<div class="select__wrapper js-select-wrapper">
<select id="edit-select" name="select" class="form-select">
<option value="" selected="selected">- None -</option>
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
</select>
<span class="select__wrapper__icon">
<i class="fa-solid fa-chevron-down icon--chevron-down"></i>
</span>
</div>
</div>
</div>
</div>
Source:
../client/scss/styleguide/molecules/select/_select.scss, line 1
2.5 #Molecules.Multi-Select Multi Select
Multi select field.
Example
Markup: scss/styleguide/molecules/multi-select/multi-select.html
<div class="app-body">
<div class="container">
<div class="row">
<div class="col-lg-7">
<div class="filters js-filters stand-alone">
<div class="d-none js-chevron-template">
<div class="fa-icon">
<i class="fa-solid fa-chevron-down icon icon--chevron-down"></i>
</div>
</div>
<form>
<div class="form-wrapper js-form-wrapper form-item">
<legend>
<span class="fieldset-legend">Multi Select 1 - 2 checkboxes</span>
</legend>
<div class="fieldset-wrapper">
<div class="form-checkboxes">
<div class="form-item form-type-checkbox js-form-type-checkbox">
<input type="checkbox" id="option-1" name="option-1" value="option-1" class="form-checkbox">
<label for="option-1" class="option">
Option 1
</label>
</div>
<div class="form-item form-type-checkbox js-form-type-checkbox">
<input type="checkbox" id="option-2" name="option-2" value="option-2" class="form-checkbox">
<label for="option-2" class="option">
Option 2
</label>
</div>
</div>
</div>
</div>
<div class="form-wrapper js-form-wrapper form-item">
<legend>
<span class="fieldset-legend">Multi Select > 3 checkboxes</span>
</legend>
<div class="fieldset-wrapper">
<div class="form-checkboxes">
<div class="form-item form-type-checkbox js-form-type-checkbox">
<input type="checkbox" id="option-11" name="option-1" value="option-1" class="form-checkbox">
<label for="option-11" class="option">
Option 1
</label>
</div>
<div class="form-item form-type-checkbox js-form-type-checkbox">
<input type="checkbox" id="option-22" name="option-2" value="option-2" class="form-checkbox">
<label for="option-22" class="option">
Option 2
</label>
</div>
<div class="form-item form-type-checkbox js-form-type-checkbox">
<input type="checkbox" id="option-33" name="option-3" value="option-3" class="form-checkbox">
<label for="option-33" class="option">
Option 3
</label>
</div>
<div class="form-item form-type-checkbox js-form-type-checkbox">
<input type="checkbox" id="option-44" name="option-4" value="option-4" class="form-checkbox">
<label for="option-44" class="option">
Option 4
</label>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
Source:
../client/scss/styleguide/molecules/multi-select/_multi-select.scss, line 1
2.6 #Molecules.Date Date
Custom date for the forms.
Example
Markup: scss/styleguide/molecules/date/date.html
<div class="container app-body">
<div class="row">
<div class="col-lg-7 form__container">
<form>
<div class="form-item form-type-date form-item-date">
<label for="date">Date</label>
<input type="date" id="date" name="date" value="2022-03-17" class="form-date">
</div>
</form>
</div>
</div>
</div>
Source:
../client/scss/styleguide/molecules/date/_date.scss, line 1
2.7 #Molecules.Textfield Textfield
Custom textfield for the forms.
Example
Markup: scss/styleguide/molecules/textfield/textfield.html
<div class="container app-body">
<div class="row">
<div class="col-lg-7 form__container">
<form>
<div class="form-type-textfield">
<label for="textfield" >Textfield</label>
<input type="text" id="textfield" name="textfield" value="" placeholder="Input field" class="form-text required">
</div>
<div class="form-type-textfield form-item form-item--error">
<label for="textfield-error">Textfield</label>
<input type="text" id="textfield-error" name="textfield-error" value="" placeholder="Input field" class="form-text error" aria-invalid="true">
<div class="form-item--error-message">
<strong>Textfield field is required.</strong>
</div>
</div>
</form>
</div>
</div>
</div>
Source:
../client/scss/styleguide/molecules/textfield/_textfield.scss, line 1
2.8 #Molecules.Email Email
Custom email for the forms.
Example
Markup: scss/styleguide/molecules/email/email.html
<div class="container app-body">
<div class="row">
<div class="col-lg-7 form__container">
<form>
<div class="form-item form-type-email form-item-email">
<label for="email">Email</label>
<input type="email" id="email" name="email" value="" placeholder="Email" class="form-email">
</div>
<div class="form-item form-type-email form-item-email form-item--error">
<label for="email-error">Email</label>
<input type="email" id="email-error" name="email" value="" placeholder="Email" class="form-email error" aria-invalid="true">
<div class="form-item--error-message">
<strong>Email field is required.</strong>
</div>
</div>
</form>
</div>
</div>
</div>
Source:
../client/scss/styleguide/molecules/email/_email.scss, line 1
2.9 #Molecules.Textarea Textarea
Custom textarea for the forms.
Example
Markup: scss/styleguide/molecules/textarea/textarea.html
<div class="container app-body">
<div class="row">
<div class="col-lg-7 form__container">
<form>
<div class="form-item form-type-textarea form-item-textarea">
<label for="textarea">Textarea</label>
<div class="form-textarea-wrapper">
<textarea id="textarea" name="textarea" rows="5" cols="60" placeholder="Textarea" class="form-textarea resize-vertical"></textarea>
</div>
</div>
<div class="form-item form-type-textarea form-item-textarea form-item--error">
<label for="textarea-error">Textarea</label>
<div class="form-textarea-wrapper">
<textarea id="textarea-error" name="textarea" rows="5" cols="60" placeholder="Textarea" class="form-textarea error resize-vertical" aria-invalid="true"></textarea>
</div>
<div class="form-item--error-message">
<strong>Textarea field is required.</strong>
</div>
</div>
</form>
</div>
</div>
</div>
Source:
../client/scss/styleguide/molecules/textarea/_textarea.scss, line 1
2.10 #Molecules.File-Upload File Upload
Custom file upload for the forms.
Example
Markup: scss/styleguide/molecules/file-upload/file-upload.html
<div class="container app-body">
<div class="row">
<div class="col-lg-7 form__container">
<form>
<div class="form-item form-type-managed-file form-item-file">
<label for="file-upload">File</label>
<div class="form-managed-file">
<input type="file" id="file-upload" name="files[file]" size="22" class="form-file">
<input class="button form-submit" type="submit" id="file-upload-button" name="file_upload_button" value="Upload">
<input type="hidden" name="file[fids]">
</div>
<div class="description">
<div id="edit-file--description" class="webform-element-description">
One file only.<br>100 MB limit.<br>Allowed types: pdf, png.
</div>
</div>
</div>
</form>
</div>
</div>
</div>
Source:
../client/scss/styleguide/molecules/file-upload/_file-upload.scss, line 1
2.11 #Molecules.DateTime DateTime
Custom datetime for the forms.
Example
Markup: scss/styleguide/molecules/date-time/date-time.html
<div class="container app-body">
<div class="row">
<div class="col-lg-7 form__container">
<form>
<div class="form-item form-type-datetime form-item-date-time">
<label>Date/time</label>
<div id="date-time" class="container-inline">
<div class="form-item form-type-date form-item-date-time-date form-no-label">
<label for="date-time-date" class="visually-hidden js-form-required form-required">Date/time: Date</label>
<input title="Date (e.g. 2022-03-16)" type="date" id="date-time-date" name="date_time[date]" value="" size="12" class="form-date">
</div>
<div class="form-item form-type-webform-time form-item-date-time-time form-no-label">
<label for="date-time-time">Date/time: Time</label>
<input title="Time (e.g. 10:09:34)" type="time" step="60" id="date-time-time" name="date_time[time]" value="" size="12" maxlength="12" class="form-time">
</div>
</div>
</div>
</form>
</div>
</div>
</div>
Source:
../client/scss/styleguide/molecules/date-time/_date-time.scss, line 1
2.12 #Molecules.Number Number
Custom number for the forms.
Example
Markup: scss/styleguide/molecules/number/number.html
<div class="container app-body">
<div class="row">
<div class="col-lg-7 form__container">
<form>
<div class="form-item form-type-number form-item-number">
<label for="number">Number</label>
<input type="number" id="number" name="number" value="" step="any" placeholder="0" class="form-number">
</div>
</form>
</div>
</div>
</div>
Source:
../client/scss/styleguide/molecules/number/_number.scss, line 1