To style when mostly raw Form elements are sufficient.
<form action="" method="POST" enctype="multipart/form-data" class="s-form">
<h3>
(Optional) Title of Form
</h3>
<p>
(Optional) Description of the form.
</p>
<ul style="display:none;">
<li>
Sample <strong>form</strong>
error. <a href="https://example.com" target="_blank">Link.</a>
</li>
</ul>
<div class=" has-required">
<label for="name">
Name
<span aria-label="(required)">*</span>
</label>
<input type="text" name="name" required="" placeholder="Your name" id="name" />
<ul style="display:none;">
<li>
Sample <strong>field</strong>
error. <a href="https://example.com" target="_blank">Link.</a>
</li>
</ul>
<small class="">
We use this to identify your submission.
</small>
</div>
<div>
<label for="favorite-fruit">Favorite Fruit</label>
<select name="favorite-fruit" id="favorite-fruit">
<option value="" selected="">
Please select an option
</option>
<option value="Apple">Apple</option>
<option value="Banana">Banana</option>
<option value="Cherry">Cherry</option>
<option value="Durian">Durian</option>
<option value="Other">Other</option>
<option value="Whatever">Whatever</option>
</select>
<ul style="display:none;">
<li>
Sample <strong>field</strong>
error. <a href="https://example.com" target="_blank">Link.</a>
</li>
</ul>
<small class="">
Choose your favorite fruit.
</small>
</div>
<div>
<label for="wake-up-time">Wake Up Time</label>
<input type="time" name="wake-up-time" id="wake-up-time" />
<ul style="display:none;">
<li>
Sample <strong>field</strong>
error. <a href="https://example.com" target="_blank">Link.</a>
</li>
</ul>
<small class="">
We use this to know when to wake you up.
</small>
</div>
<div>
<label>Radio stations</label>
<menu id="radio-stations">
<li>
<label for="radio-stations-0">
<input type="radio" name="radio-stations" value="LX 1234" id="radio-stations-0" />
LX 1234
</label>
</li>
<li>
<label for="radio-stations-1">
<input type="radio" name="radio-stations" value="LOVE 45" id="radio-stations-1" />
LOVE 45
</label>
</li>
<li>
<label for="radio-stations-2">
<input type="radio" name="radio-stations" value="OLD 555" id="radio-stations-2" />
OLD 555
</label>
</li>
</menu>
<ul style="display:none;">
<li>
Sample <strong>field</strong>
error. <a href="https://example.com" target="_blank">Link.</a>
</li>
</ul>
<small class="">
Which radio stations do you prefer?
</small>
</div>
<div class=" has-type-check">
<input type="checkbox" name="checking-out" id="checking-out" />
<label for="checking-out">Checking Out?</label>
<ul style="display:none;">
<li>
Sample <strong>field</strong>
error. <a href="https://example.com" target="_blank">Link.</a>
</li>
</ul>
<small class="">
Are you checking out today?
</small>
</div>
<div>
<label for="">
Which fish do you want?
</label>
<menu id="which-fish-do-you-want">
<li>
<label for="which-fish-do-you-want-0">
<input type="checkbox" name="which-fish-do-you-want" value="one fish" id="which-fish-do-you-want-0" />
one fish
</label>
</li>
<li>
<label for="which-fish-do-you-want-1">
<input type="checkbox" name="which-fish-do-you-want" value="two fish" id="which-fish-do-you-want-1" />
two fish
</label>
</li>
<li>
<label for="which-fish-do-you-want-2">
<input type="checkbox" name="which-fish-do-you-want" value="red fish" id="which-fish-do-you-want-2" />
red fish
</label>
</li>
<li>
<label for="which-fish-do-you-want-3">
<input type="checkbox" name="which-fish-do-you-want" value="blue fish" id="which-fish-do-you-want-3" />
blue fish
</label>
</li>
<li>
<label for="which-fish-do-you-want-4">
<input type="checkbox" name="which-fish-do-you-want" value="all the fish" id="which-fish-do-you-want-4" />
all the fish
</label>
</li>
</menu>
<ul style="display:none;">
<li>
Sample <strong>field</strong>
error. <a href="https://example.com" target="_blank">Link.</a>
</li>
</ul>
</div>
<div>
<label for="hangry-time">Hangry Time</label>
<select name="hangry-time" id="hangry-time">
<option value="" selected="">
Please select an option
</option>
<option value="Morning">Morning</option>
<option value="Noon">Noon</option>
<option value="Afternoon">Afternoon</option>
<option value="Evening">Evening</option>
<option value="Night">Night</option>
<option value="Midnight">Midnight</option>
</select>
<ul style="display:none;">
<li>
Sample <strong>field</strong>
error. <a href="https://example.com" target="_blank">Link.</a>
</li>
</ul>
<small class="">
At which time of day do you get hangry?
</small>
</div>
<div>
<label for="life-story">Life Story</label>
<textarea name="life-story" cols="40" rows="10" id="life-story"></textarea>
<ul style="display:none;">
<li>
Sample <strong>field</strong>
error. <a href="https://example.com" target="_blank">Link.</a>
</li>
</ul>
<small class="">
Go on, tell me everything.
</small>
</div>
<div>
<label for="what-day-is-it">What day is it?</label>
<input type="date" name="what-day-is-it" id="what-day-is-it" />
<ul style="display:none;">
<li>
Sample <strong>field</strong>
error. <a href="https://example.com" target="_blank">Link.</a>
</li>
</ul>
<small class="">
Please enter today's date.
</small>
</div>
<div>
<label for="your-favorite-picture">Your favorite picture</label>
<input type="file" name="your-favorite-picture" id="your-favorite-picture" />
<ul style="display:none;">
<li>
Sample <strong>field</strong>
error. <a href="https://example.com" target="_blank">Link.</a>
</li>
</ul>
<small class="">
Upload your favorite image.
<small class="">
Supported types:
<code>.jpeg</code>,<code>.jpg</code>,<code>.gif</code>,<code>.png</code>
</small>
</small>
</div>
<div class=" has-spam-check has-required">
<label for="recaptcha_g9y93gP8">
Are you a robot?
<span aria-label="(required)">*</span>
</label>
<script src="https://www.google.com/recaptcha/api.js"></script>
<script type="text/javascript">
// Submit function to be called, after reCAPTCHA was successful. var
onSubmit_9e32f28ccb9545109ff6ae891f9af324 = function(token) {
" "
} {
console.log("reCAPTCHA validated for 'data-widget-uuid=\"9e32f28ccb9545109ff6ae891f9af324\"'")
};
</script>
<div class="g-recaptcha" data-sitekey="6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI" required="" id="recaptcha_g9y93gP8" data-widget-uuid="9e32f28ccb9545109ff6ae891f9af324" data-callback="onSubmit_9e32f28ccb9545109ff6ae891f9af324" data-size="normal"></div>
</div>
<fieldset class=" has-spam-check has-required">
<legend>sample fields in a fieldset</legend>
<div class=" has-required">
<label for="name">
Name
<span aria-label="(required)">*</span>
</label>
<input type="text" name="name" required="" placeholder="Your name" id="name" />
<ul style="display:none;">
<li>
Sample <strong>field</strong>
error. <a href="https://example.com" target="_blank">Link.</a>
</li>
</ul>
<small class="">
We use this to identify your submission.
</small>
</div>
<div>
<label for="favorite-fruit">Favorite Fruit</label>
<select name="favorite-fruit" id="favorite-fruit">
<option value="" selected="">
Please select an option
</option>
<option value="Apple">Apple</option>
<option value="Banana">Banana</option>
<option value="Cherry">Cherry</option>
<option value="Durian">Durian</option>
<option value="Other">Other</option>
<option value="Whatever">Whatever</option>
</select>
<ul style="display:none;">
<li>
Sample <strong>field</strong>
error. <a href="https://example.com" target="_blank">Link.</a>
</li>
</ul>
<small class="">
Choose your favorite fruit.
</small>
</div>
</fieldset>
<fieldset>
<legend>sample buttons outside footer</legend>
<button type="submit">
Submit
</button>
<button type="button">
Button
</button>
<button type="reset">
Reset
</button>
</fieldset>
<footer>
<button type="submit">
Submit
</button>
<button id="toggle-field-errors" type="button">
Toggle Field Errors
</button>
<button id="toggle-required-fields" type="button">
Toggle Required Fields
</button>
<button type="reset">
Reset Field Values
</button>
</footer>
</form>
<script type="module">
import toggleFieldErrors from '../raw/c-form/toggle-field-errors.js';
document.addEventListener('DOMContentLoaded', () => {
const toggle = document.getElementById('toggle-field-errors');
const form = document.querySelector('form');
const selector = ':where(.s-form > ul), :where(.s-form > div > ul)'
toggle.addEventListener('click', () => {
toggleFieldErrors(form, selector);
});
});
</script>
<script type="module">
import toggleRequiredFields from '../raw/c-form/toggle-required-fields.js';
document.addEventListener('DOMContentLoaded', () => {
const toggle = document.getElementById('toggle-required-fields');
const form = toggle.closest('form');
toggle.addEventListener('click', () => {
toggleRequiredFields(form, {
shouldScrollToFirst: true,
classNames: {
wrapRequired: 'has-required'
},
selectors: {
wrap: ':where(.s-form > div)'
}
});
});
});
</script>
<script type="module">
document.addEventListener('DOMContentLoaded', () => {
const form = document.querySelector('form');
form.addEventListener('submit', event => {
event.preventDefault();
/* TODO: Show success message on form */
alert('Form was not submitted, because this is an incomplete demo.');
});
});
</script>
{
"shouldSkipPattern": true,
"globalStyles": [
{
"isInternal": true,
"layer": "base",
"path": "/assets/core-styles.demo.css"
},
{
"isInternal": true,
"layer": "base",
"path": "/assets/core-styles.base.css"
}
],
"cmsStyles": [
{
"isInternal": true,
"layer": "base",
"path": "/assets/core-styles.cms.css"
}
],
"docsStyles": [
{
"isInternal": true,
"layer": "base",
"path": "/assets/core-styles.docs.css"
}
],
"portalStyles": [
{
"isInternal": true,
"layer": "base",
"path": "/assets/core-styles.portal.css"
}
],
"subdir": "trumps",
"helpTextTag": "small",
"inputListTag": "menu",
"selectors": {
"errorList": ":where(.s-form > ul), :where(.s-form > div > ul)",
"wrap": ":where(.s-form > div)"
},
"classNames": {
"root": "s-form",
"has_required": "has-required",
"has_checkbox": "has-type-check",
"has_spam_filter": "has-spam-check"
}
}