2 - Molecules
Source: molecules/__documentation.scss, line 5
Molecules are collections of atoms that form relatively simple UI components.
2.1.1 - Form Group
Source: molecules/_form-group.scss, line 59
.form-group helps get even spacing in the form. It helps as well to style form validation with its modifiers.
Modifiers classes
.is-valid- Form group is valid.has-error- Form group has error
Examples:
Default styling
We'll never share your email with anyone else.
Opps, please enter a valid email.
Email is valid.
Opps, please enter a message.
Message is valid.
Opps, please select a value.
input is valid.
Opps, please check.
input is valid.
Opps, please check.
input is valid.
.is-valid
Form group is valid
We'll never share your email with anyone else.
Opps, please enter a valid email.
Email is valid.
Opps, please enter a message.
Message is valid.
Opps, please select a value.
input is valid.
Opps, please check.
input is valid.
Opps, please check.
input is valid.
.has-error
Form group has error
We'll never share your email with anyone else.
Opps, please enter a valid email.
Email is valid.
Opps, please enter a message.
Message is valid.
Opps, please select a value.
input is valid.
Opps, please check.
input is valid.
Opps, please check.
input is valid.
<div class="form-group [modifier]">
<label for="exampleEmail1">Email address</label>
<input type="email" id="exampleEmail1" aria-describedby="emailHelp" placeholder="Enter email">
<p id="emailHelp" class="form-text mb-0">We'll never share your email with anyone else.</p>
<p class="form-text has-error">Opps, please enter a valid email.</p>
<p class="form-text is-valid">Email is valid.</p>
</div>
<div class="form-group [modifier]">
<label for="message1">Your message</label>
<textarea id="message1" placeholder="Your message"></textarea>
<p class="form-text has-error">Opps, please enter a message.</p>
<p class="form-text is-valid">Message is valid.</p>
</div>
<div class="form-group [modifier]">
<label>Select an option</label>
<select>
<option selected="true" disabled>Select dropdown</option>
<option value="option1">option1</option>
<option value="option2">option2</option>
<option value="option3">option3</option>
<option value="option4">option4</option>
</select>
<p class="form-text has-error">Opps, please select a value.</p>
<p class="form-text is-valid">input is valid.</p>
</div>
<div class="form-group [modifier]">
<label>What do you thing?</label>
<div class="input-group">
<label class="input-label"><input type="radio" name="test7" value="radio1"> Yes</label>
<label class="input-label"><input type="radio" name="test7" value="radio2"> No</label>
<label class="input-label"><input type="radio" name="test7" value="radio3"> Not sure</label>
</div>
<p class="form-text has-error">Opps, please check.</p>
<p class="form-text is-valid">input is valid.</p>
</div>
<div class="form-group [modifier]">
<label>Do you agree?</label>
<div>
<label class="input-label"><input type="checkbox" name="test8" value="checkbox"> I agree with <a href="#">Terms and conditions</a></label>
</div>
<p class="form-text has-error">Opps, please check.</p>
<p class="form-text is-valid">input is valid.</p>
</div>2.1.2 - Input group
Source: molecules/_form-group.scss, line 122
.input-group helps to space evenly radio and checkbox buttons
Example:
Opps, please check.
input is valid.
<div class="form-group">
<label>What do you thing?</label>
<div class="input-group">
<label class="input-label"><input type="radio" name="test7" value="radio1"> Yes</label>
<label class="input-label"><input type="radio" name="test7" value="radio2"> No</label>
<label class="input-label"><input type="radio" name="test7" value="radio3"> Not sure</label>
</div>
<p class="form-text has-error">Opps, please check.</p>
<p class="form-text is-valid">input is valid.</p>
</div>