<form action="#" method="post" class="form-general">
<div class="form-item ">
<label for="type-text-1">
Text input 1
</label>
<input type="text" id="type-text-1" value="">
</div>
<div class="form-item ">
<label for="select-1">Select 1</label>
<select id="select-1" name="select-1" class="">
<option value="option-0">Option 1</option>
<option value="option-1">Option 2</option>
<option value="option-2">Option 3</option>
<option value="option-3">Option 4</option>
</select>
</div>
<div class="form-item ">
<fieldset class="radio-check-group">
<legend>Check boxes</legend>
<label class="radio-check">
<input type="checkbox" id="check-1" name="check-1">
<span>Checkbox 1</span>
</label>
<label class="radio-check">
<input type="checkbox" id="check-2" name="check-2">
<span>Checkbox 2</span>
</label>
<label class="radio-check">
<input type="checkbox" id="check-3" name="check-3">
<span>Checkbox 3</span>
</label>
</fieldset>
</div>
<div class="form-item ">
<fieldset class="radio-check-group">
<legend>Radio buttons</legend>
<label class="radio-check">
<input type="radio" id="radio-group-1-2b2a266d-ad42-26a7-2f6c-77a64766b8ff" name="radio-group-1-">
<span>Radio 1</span>
</label>
<label class="radio-check">
<input type="radio" id="radio-group-1-925383aa-03bc-d028-2690-f6bc434b69de" name="radio-group-1-">
<span>Radio 2</span>
</label>
<label class="radio-check">
<input type="radio" id="radio-group-1-d03f108b-c372-6a5d-fca0-5d6cdd5e5964" name="radio-group-1-">
<span>Radio 3</span>
</label>
</fieldset>
</div>
<div class="submit-area ">
<button type="submit">
<span>
<span>Submit</span>
</span>
</button>
</div>
</form>
<form action="#" method="post" class="form-general">
{{#> @partial-block}}
{{> @form-item-input text-input-1}}
{{> @form-item-select select-1}}
{{#> @radio-check-group check-group-1}}
{{> @input-checkbox check-1}}
{{> @input-checkbox check-2}}
{{> @input-checkbox check-3}}
{{/ @radio-check-group}}
{{#> @radio-check-group radio-group-1}}
{{> @input-radio}}
{{/ @radio-check-group}}
{{> @submit-area}}
{{/ @partial-block}}
</form>
{
"text-input-1": {
"label": "Text input 1",
"id": "type-text-1"
},
"select-1": {
"label": "Select 1",
"id": "select-1",
"options": [
{
"option": "Option 1"
},
{
"option": "Option 2"
},
{
"option": "Option 3"
},
{
"option": "Option 4"
}
]
},
"check-group-1": {
"legend": "Check boxes",
"check-1": {
"id": "check-1",
"label": "Checkbox 1"
},
"check-2": {
"id": "check-2",
"label": "Checkbox 2"
},
"check-3": {
"id": "check-3",
"label": "Checkbox 3"
}
},
"radio-group-1": {
"legend": "Radio buttons",
"group": "radio-group-1",
"radios": [
{
"id": "radio-1",
"label": "Radio 1"
},
{
"id": "radio-2",
"label": "Radio 2"
},
{
"id": "radio-3",
"label": "Radio 3"
}
]
},
"submit-button": {
"text": "Submit",
"type": "submit"
}
}
/**
* Generic form
*/
@media screen {
@supports (display: grid) {
.form-general {
display: grid;
grid-gap: 1rem;
}
.form-general .form-item + .form-item {
margin-top: 0;
}
@media (min-width: 32em) {
.form-general {
grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
}
}
/* Reset margins due to grid-gap */
.form-general > * {
margin-top: 0;
}
.form-general > .submit-area {
grid-column: 1 / -1;
}
}
}
/**
* General form styling
*/
@media screen {
/**
* Form labels
*/
label {
display: block;
font-weight: 600;
}
label + input,
label + select,
label + textarea {
margin-top: 0;
}
/* Help text */
label em {
display: inline-block;
color: var(--label-help);
font-weight: 400;
font-size: 0.9em;
}
/* Match font and size on form elements */
select,
input,
textarea {
color: inherit;
font-family: inherit;
font-size: inherit;
}
/* Text-based inputs */
input[type="text"],
input[type="password"],
input[type="number"],
input[type="email"],
input[type="tel"],
input[type="time"],
input[type="date"],
input[type="url"],
textarea {
background-color: var(--input-bg);
border: 1px solid var(--input-accent);
border-radius: 0;
padding: 0.25rem 0.5rem;
-webkit-appearance: none;
}
/* Disabled text-based inputs */
input[type="text"][disabled],
input[type="password"][disabled],
input[type="number"][disabled],
input[type="email"][disabled],
input[type="tel"][disabled],
input[type="time"][disabled],
input[type="date"][disabled],
input[type="url"][disabled],
textarea[disabled] {
background-color: var(--input-bg-disabled);
}
/**
* Form item
*/
.form-item + .form-item {
margin-top: 0.5rem;
}
/* Form item label */
.form-item label + * {
margin-top: 0;
}
/* Text-based inputs in form items */
.form-item > input[type="text"],
.form-item > input[type="password"],
.form-item > input[type="number"],
.form-item > input[type="email"],
.form-item > input[type="tel"],
.form-item > input[type="time"],
.form-item > input[type="date"],
.form-item > input[type="url"],
.form-item > textarea {
width: 100%;
}
/* Select */
.form-item select {
width: 100%;
}
/**
* Check boxes & radio buttons
*/
.radio-check-group {
display: flex;
flex-wrap: wrap;
}
.radio-check-group * {
margin-top: 0;
}
.radio-check {
display: inline-flex;
align-items: center;
font-weight: 400;
}
.radio-check input {
margin: 0.25em 0.4em;
}
.radio-check span {
margin-top: 0;
}
/**
* Input validation statuses
*/
.form-item.form-error em {
font-weight: 600;
color: var(--form-error);
}
.form-item.form-error input {
border-color: var(--form-error);
background-color: var(--form-error-bg);
}
/**
* Submit area
*/
.submit-area {
display: flex;
justify-content: flex-end;
margin-top: 1.5rem;
}
/**
* Updated input
*
* Flashes green to signify an update
*/
input.updated {
animation: fieldUpdated 2s ease-out;
}
}
@keyframes fieldUpdated {
from {
background-color: hsl(103, 100%, 71%);
}
to {
background-color: hsl(0, 100%, 100%);
}
}
Lays out a grid for its children. A @submit-area component is highly recommended and should always be placed at the bottom of the container. It will always occupy a full grid row.