Add fieldset example. Move some existing fields into the fieldset.

dist/dark-legacy.standalone.css

@@ -363,6 +363,16 @@ textarea:disabled {
   color: #a9a9a9;
 }
 
+fieldset {
+  border: 1px #0096bfab solid;
+  border-radius: 6px;
+}
+
+legend {
+  font-size: 0.9em;
+  font-weight: 600;
+}
+
 input[type='range'] {
   margin: 10px 0;
   padding: 10px 0;

dist/dark.css

@@ -324,6 +324,16 @@ textarea:disabled {
   color: var(--form-placeholder);
 }
 
+fieldset {
+  border: 1px var(--focus) solid;
+  border-radius: 6px;
+}
+
+legend {
+  font-size: 0.9em;
+  font-weight: 600;
+}
+
 input[type='range'] {
   margin: 10px 0;
   padding: 10px 0;

dist/dark.standalone.css

@@ -289,6 +289,16 @@ textarea:disabled {
   color: var(--form-placeholder);
 }
 
+fieldset {
+  border: 1px var(--focus) solid;
+  border-radius: 6px;
+}
+
+legend {
+  font-size: 0.9em;
+  font-weight: 600;
+}
+
 input[type='range'] {
   margin: 10px 0;
   padding: 10px 0;

dist/light-legacy.standalone.css

@@ -363,6 +363,16 @@ textarea:disabled {
   color: #949494;
 }
 
+fieldset {
+  border: 1px #0096bfab solid;
+  border-radius: 6px;
+}
+
+legend {
+  font-size: 0.9em;
+  font-weight: 600;
+}
+
 input[type='range'] {
   margin: 10px 0;
   padding: 10px 0;

dist/light.css

@@ -324,6 +324,16 @@ textarea:disabled {
   color: var(--form-placeholder);
 }
 
+fieldset {
+  border: 1px var(--focus) solid;
+  border-radius: 6px;
+}
+
+legend {
+  font-size: 0.9em;
+  font-weight: 600;
+}
+
 input[type='range'] {
   margin: 10px 0;
   padding: 10px 0;

dist/light.standalone.css

@@ -289,6 +289,16 @@ textarea:disabled {
   color: var(--form-placeholder);
 }
 
+fieldset {
+  border: 1px var(--focus) solid;
+  border-radius: 6px;
+}
+
+legend {
+  font-size: 0.9em;
+  font-weight: 600;
+}
+
 input[type='range'] {
   margin: 10px 0;
   padding: 10px 0;

index.html

@@ -100,6 +100,10 @@
 
     <h3>Form elements</h3>
     <form>
+
+      <fieldset>
+        <legend>Fieldset</legend>
+
         <label for='email'>Email</label>
         <input
           type='email'
@@ -108,6 +112,22 @@
           placeholder='john.doe@gmail.com'
         />
 
+        <label for='password'>Password</label>
+        <input
+          type='password'
+          name='password'
+          id='password'
+          placeholder='password'
+        />
+
+        <p>
+          <input type='checkbox' name='remember' id='remember' checked />
+          <label for='remember'>Remember me</label>
+        </p>
+
+        <input type='submit' />
+      </fieldset>
+
       <label for='id'>User id (read only)</label>
       <input readonly name='id' id='id' value='04D6H89Z' />
 
@@ -166,11 +186,6 @@
         <label for='volume'>Volume</label>
         <input type='range' id='start' name='volume' id='volume' min='0' max='11' />
       </div>
-
-      <input type='checkbox' name='remember' id='remember' checked />
-      <label for='remember'>Remember me</label>
-
-      <input type='submit' />
     </form>
 
     <h3>Code</h3>

src/parts/_forms.css

@@ -135,3 +135,13 @@ textarea:disabled {
 ::placeholder {
   color: var(--form-placeholder);
 }
+
+fieldset {
+  border: 1px var(--focus) solid;
+  border-radius: 6px;
+}
+
+legend {
+  font-size: 0.9em;
+  font-weight: 600;
+}