<fieldset class="">
<legend>Legend</legend>
Content
</fieldset>
<fieldset class="{{modifier}}">
<legend>{{legend}}</legend>
{{#> @partial-block}}
{{content}}
{{/ @partial-block}}
</fieldset>
{
"legend": "Legend",
"content": "Content"
}
@media screen {
/**
* Fieldset
*/
fieldset {
border: 0;
background-color: var(--fieldset-bg);
padding: 0.5rem 1rem 1rem;
box-shadow: var(--fieldset-shadow);
}
@supports (display: grid) {
.fieldset-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
grid-gap: 1em;
align-content: start;
}
.fieldset-grid > .form-item + .form-item {
margin-top: 0;
}
.fieldset-grid > .submit-area {
grid-column: 1 / -1;
}
}
legend {
font-weight: 600;
background-color: var(--fieldset-bg);
border-radius: var(--form-radius);
padding: 0 0.5rem;
margin-left: -0.5rem;
box-shadow: var(--legend-shadow);
}
legend + * {
margin-top: 0.25em;
}
/* Slim fieldset */
fieldset.slim,
fieldset.slim legend {
border: 0;
padding: 0;
box-shadow: none;
background-color: transparent;
}
fieldset.slim + fieldset.slim {
margin-top: 0.25em;
}
fieldset.slim legend {
margin-left: 0;
}
/* Slim inline fieldset */
fieldset.slim.inline label {
margin: 0.5em 0 0;
}
fieldset.slim.inline label + label {
margin-left: 1em;
}
}
The HTML <fieldset> element is used to group several controls as well as labels (<label>) within a web form.
Please see the article on MDN for more info.
Same premises as an ordinary <fieldset> with the exception of a inner container that is a grid container.
<fieldset class="">
<legend>Legend</legend>
<div class="fieldset-grid">
Content
</div>
</fieldset>