v6: docs: Use custom check/radio markup across docs (#42336)

* Use custom check/radio markup across docs

Replace Bootstrap .form-check markup with a unified form-field/.check pattern and inline SVG indicators. Radios now use a .radio class; checkboxes are wrapped in .check with SVG paths for checked/indeterminate states. Update examples (cheatsheet, checkout, heroes, list-groups, sign-in), list-groups CSS selectors (.check:has(input:checked), .check-input-placeholder, .radio rules), and documentation pages (list-group.mdx, forms layout/overview) to match the new structure.

* Fix for list groups example

diff --git a/site/src/assets/examples/cheatsheet/index.astro b/site/src/assets/examples/cheatsheet/index.astro
index f781b34927e4afbd802cdda23eabe32dbdee89ae..80e14a7909bfbc3d4c6b4f5d93f29c4d298ed1bd 100644 (file)
--- a/site/src/assets/examples/cheatsheet/index.astro
+++ b/site/src/assets/examples/cheatsheet/index.astro
@@ -332,28 +332,36 @@ export const body_class = 'bg-body-tertiary'
               <option value="3">Three</option>
             </select>
           </div>
-          <div class="mb-3 form-check">
-            <input type="checkbox" class="form-check-input" id="exampleCheck1">
-            <label class="form-check-label" for="exampleCheck1">Check me out</label>
+          <div class="mb-3 form-field">
+            <div class="check">
+              <input type="checkbox" id="exampleCheck1">
+              <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'>
+                <path class="checked" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m4 8 3 3 5-5'/>
+                <path class="indeterminate" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4.5 8.5h6'/>
+              </svg>
+            </div>
+            <label for="exampleCheck1">Check me out</label>
           </div>
           <fieldset class="mb-3">
             <legend>Radios buttons</legend>
-            <div class="form-check">
-              <input type="radio" name="radios" class="form-check-input" id="exampleRadio1">
-              <label class="form-check-label" for="exampleRadio1">Default radio</label>
+            <div class="form-field">
+              <input type="radio" name="radios" class="radio" id="exampleRadio1">
+              <label for="exampleRadio1">Default radio</label>
             </div>
-            <div class="mb-3 form-check">
-              <input type="radio" name="radios" class="form-check-input" id="exampleRadio2">
-              <label class="form-check-label" for="exampleRadio2">Another radio</label>
+            <div class="mb-3 form-field">
+              <input type="radio" name="radios" class="radio" id="exampleRadio2">
+              <label for="exampleRadio2">Another radio</label>
             </div>
           </fieldset>
           <div class="mb-3">
             <label class="form-label" for="customFile">Upload</label>
             <input type="file" class="form-control" id="customFile">
           </div>
-          <div class="mb-3 form-check form-switch">
-            <input class="form-check-input" type="checkbox" role="switch" id="switchCheckChecked" checked>
-            <label class="form-check-label" for="switchCheckChecked">Checked switch checkbox input</label>
+          <div class="mb-3 form-field">
+            <div class="switch">
+              <input type="checkbox" role="switch" id="switchCheckChecked" checked>
+            </div>
+            <label for="switchCheckChecked">Checked switch checkbox input</label>
           </div>
           <div class="mb-3">
             <label for="customRange3" class="form-label">Example range</label>
@@ -383,32 +391,38 @@ export const body_class = 'bg-body-tertiary'
                 <option>Disabled select</option>
               </select>
             </div>
-            <div class="mb-3">
-              <div class="form-check">
-                <input class="form-check-input" type="checkbox" id="disabledFieldsetCheck" disabled>
-                <label class="form-check-label" for="disabledFieldsetCheck">
-                  Can't check this
-                </label>
+            <div class="mb-3 form-field">
+              <div class="check">
+                <input type="checkbox" id="disabledFieldsetCheck" disabled>
+                <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'>
+                  <path class="checked" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m4 8 3 3 5-5'/>
+                  <path class="indeterminate" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4.5 8.5h6'/>
+                </svg>
               </div>
+              <label for="disabledFieldsetCheck">
+                Can't check this
+              </label>
             </div>
             <fieldset class="mb-3">
               <legend>Disabled radios buttons</legend>
-              <div class="form-check">
-                <input type="radio" name="radios" class="form-check-input" id="disabledRadio1" disabled>
-                <label class="form-check-label" for="disabledRadio1">Disabled radio</label>
+              <div class="form-field">
+                <input type="radio" name="radios" class="radio" id="disabledRadio1" disabled>
+                <label for="disabledRadio1">Disabled radio</label>
               </div>
-              <div class="mb-3 form-check">
-                <input type="radio" name="radios" class="form-check-input" id="disabledRadio2" disabled>
-                <label class="form-check-label" for="disabledRadio2">Another radio</label>
+              <div class="mb-3 form-field">
+                <input type="radio" name="radios" class="radio" id="disabledRadio2" disabled>
+                <label for="disabledRadio2">Another radio</label>
               </div>
             </fieldset>
             <div class="mb-3">
               <label class="form-label" for="disabledCustomFile">Upload</label>
               <input type="file" class="form-control" id="disabledCustomFile" disabled>
             </div>
-            <div class="mb-3 form-check form-switch">
-              <input class="form-check-input" type="checkbox" role="switch" id="disabledSwitchCheckChecked" checked disabled>
-              <label class="form-check-label" for="disabledSwitchCheckChecked">Disabled checked switch checkbox input</label>
+            <div class="mb-3 form-field">
+              <div class="switch">
+                <input type="checkbox" role="switch" id="disabledSwitchCheckChecked" checked disabled>
+              </div>
+              <label for="disabledSwitchCheckChecked">Disabled checked switch checkbox input</label>
             </div>
             <div class="mb-3">
               <label for="disabledRange" class="form-label">Disabled range</label>
@@ -572,9 +586,15 @@ export const body_class = 'bg-body-tertiary'
             </div>
           </div>
           <div class="col-12">
-            <div class="form-check">
-              <input class="form-check-input is-invalid" type="checkbox" value="" id="invalidCheck3" required>
-              <label class="form-check-label" for="invalidCheck3">
+            <div class="form-field">
+              <div class="check">
+                <input class="is-invalid" type="checkbox" value="" id="invalidCheck3" required>
+                <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'>
+                  <path class="checked" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m4 8 3 3 5-5'/>
+                  <path class="indeterminate" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4.5 8.5h6'/>
+                </svg>
+              </div>
+              <label for="invalidCheck3">
                 Agree to terms and conditions
               </label>
               <div class="invalid-feedback">

diff --git a/site/src/assets/examples/checkout/index.astro b/site/src/assets/examples/checkout/index.astro
index 8779170616d4f80c41d72734e4340712e0b04583..fa4d1d40ba842fa27e3dd17e342079cd4fd9a0aa 100644 (file)
--- a/site/src/assets/examples/checkout/index.astro
+++ b/site/src/assets/examples/checkout/index.astro
@@ -148,14 +148,26 @@ export const body_class = 'bg-body-tertiary'
 
           <hr class="my-4">
 
-          <div class="form-check">
-            <input type="checkbox" class="form-check-input" id="same-address">
-            <label class="form-check-label" for="same-address">Shipping address is the same as my billing address</label>
+          <div class="form-field">
+            <div class="check">
+              <input type="checkbox" id="same-address">
+              <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'>
+                <path class="checked" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m4 8 3 3 5-5'/>
+                <path class="indeterminate" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4.5 8.5h6'/>
+              </svg>
+            </div>
+            <label for="same-address">Shipping address is the same as my billing address</label>
           </div>
 
-          <div class="form-check">
-            <input type="checkbox" class="form-check-input" id="save-info">
-            <label class="form-check-label" for="save-info">Save this information for next time</label>
+          <div class="form-field">
+            <div class="check">
+              <input type="checkbox" id="save-info">
+              <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'>
+                <path class="checked" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m4 8 3 3 5-5'/>
+                <path class="indeterminate" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4.5 8.5h6'/>
+              </svg>
+            </div>
+            <label for="save-info">Save this information for next time</label>
           </div>
 
           <hr class="my-4">
@@ -163,17 +175,17 @@ export const body_class = 'bg-body-tertiary'
           <h4 class="mb-3">Payment</h4>
 
           <div class="my-3">
-            <div class="form-check">
-              <input id="credit" name="paymentMethod" type="radio" class="form-check-input" checked required>
-              <label class="form-check-label" for="credit">Credit card</label>
+            <div class="form-field">
+              <input id="credit" name="paymentMethod" type="radio" class="radio" checked required>
+              <label for="credit">Credit card</label>
             </div>
-            <div class="form-check">
-              <input id="debit" name="paymentMethod" type="radio" class="form-check-input" required>
-              <label class="form-check-label" for="debit">Debit card</label>
+            <div class="form-field">
+              <input id="debit" name="paymentMethod" type="radio" class="radio" required>
+              <label for="debit">Debit card</label>
             </div>
-            <div class="form-check">
-              <input id="paypal" name="paymentMethod" type="radio" class="form-check-input" required>
-              <label class="form-check-label" for="paypal">PayPal</label>
+            <div class="form-field">
+              <input id="paypal" name="paymentMethod" type="radio" class="radio" required>
+              <label for="paypal">PayPal</label>
             </div>
           </div>
 

diff --git a/site/src/assets/examples/heroes/index.astro b/site/src/assets/examples/heroes/index.astro
index 067524ff79cb937a7cfea699bbd9b29e26bc1133..a2065b29865fea6826f6bad6395bfa04ea6fc567 100644 (file)
--- a/site/src/assets/examples/heroes/index.astro
+++ b/site/src/assets/examples/heroes/index.astro
@@ -74,10 +74,15 @@ export const extra_css = ['heroes.css']
             <input type="password" class="form-control" id="floatingPassword" placeholder="Password">
             <label for="floatingPassword">Password</label>
           </div>
-          <div class="checkbox mb-3">
-            <label>
-              <input type="checkbox" value="remember-me"> Remember me
-            </label>
+          <div class="form-field mb-3">
+            <div class="check">
+              <input type="checkbox" value="remember-me" id="heroRememberMe">
+              <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'>
+                <path class="checked" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m4 8 3 3 5-5'/>
+                <path class="indeterminate" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4.5 8.5h6'/>
+              </svg>
+            </div>
+            <label for="heroRememberMe">Remember me</label>
           </div>
           <button class="w-100 btn-solid theme-primary btn-lg" type="submit">Sign up</button>
           <hr class="my-4">

diff --git a/site/src/assets/examples/list-groups/index.astro b/site/src/assets/examples/list-groups/index.astro
index 377363d4a1f1684aa82a63c13b0f4e118ce44265..84a3b4e3253ed55f6cd65ece98c76aef743cc00e 100644 (file)
--- a/site/src/assets/examples/list-groups/index.astro
+++ b/site/src/assets/examples/list-groups/index.astro
@@ -59,21 +59,39 @@ export const extra_css = ['list-groups.css']
 <div class="d-flex flex-column md:flex-row p-4 gap-4 md:py-5 align-items-center justify-content-center">
   <div class="list-group">
     <label class="list-group-item d-flex gap-2">
-      <input class="form-check-input flex-shrink-0" type="checkbox" value="" checked>
+      <div class="check flex-shrink-0">
+        <input type="checkbox" value="" checked>
+        <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'>
+          <path class="checked" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m5.5 10 3 3 6-6'/>
+          <path class="indeterminate" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5.5 10.5h8'/>
+        </svg>
+      </div>
       <span>
         First checkbox
         <small class="d-block text-body-secondary">With support text underneath to add more detail</small>
       </span>
     </label>
     <label class="list-group-item d-flex gap-2">
-      <input class="form-check-input flex-shrink-0" type="checkbox" value="">
+      <div class="check flex-shrink-0">
+        <input type="checkbox" value="">
+        <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'>
+          <path class="checked" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m5.5 10 3 3 6-6'/>
+          <path class="indeterminate" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5.5 10.5h8'/>
+        </svg>
+      </div>
       <span>
         Second checkbox
         <small class="d-block text-body-secondary">Some other text goes here</small>
       </span>
     </label>
     <label class="list-group-item d-flex gap-2">
-      <input class="form-check-input flex-shrink-0" type="checkbox" value="">
+      <div class="check flex-shrink-0">
+        <input type="checkbox" value="">
+        <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'>
+          <path class="checked" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m5.5 10 3 3 6-6'/>
+          <path class="indeterminate" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5.5 10.5h8'/>
+        </svg>
+      </div>
       <span>
         Third checkbox
         <small class="d-block text-body-secondary">And we end with another snippet of text</small>
@@ -83,21 +101,21 @@ export const extra_css = ['list-groups.css']
 
   <div class="list-group">
     <label class="list-group-item d-flex gap-2">
-      <input class="form-check-input flex-shrink-0" type="radio" name="listGroupRadios" id="listGroupRadios1" value="" checked>
+      <input class="radio flex-shrink-0" type="radio" name="listGroupRadios" id="listGroupRadios1" value="" checked>
       <span>
         First radio
         <small class="d-block text-body-secondary">With support text underneath to add more detail</small>
       </span>
     </label>
     <label class="list-group-item d-flex gap-2">
-      <input class="form-check-input flex-shrink-0" type="radio" name="listGroupRadios" id="listGroupRadios2" value="">
+      <input class="radio flex-shrink-0" type="radio" name="listGroupRadios" id="listGroupRadios2" value="">
       <span>
         Second radio
         <small class="d-block text-body-secondary">Some other text goes here</small>
       </span>
     </label>
     <label class="list-group-item d-flex gap-2">
-      <input class="form-check-input flex-shrink-0" type="radio" name="listGroupRadios" id="listGroupRadios3" value="">
+      <input class="radio flex-shrink-0" type="radio" name="listGroupRadios" id="listGroupRadios3" value="">
       <span>
         Third radio
         <small class="d-block text-body-secondary">And we end with another snippet of text</small>
@@ -111,7 +129,13 @@ export const extra_css = ['list-groups.css']
 <div class="d-flex flex-column md:flex-row p-4 gap-4 md:py-5 align-items-center justify-content-center">
   <div class="list-group">
     <label class="list-group-item d-flex gap-3">
-      <input class="form-check-input flex-shrink-0" type="checkbox" value="" checked style="font-size: 1.375em;">
+      <div class="check flex-shrink-0" style="font-size: 1.375em;">
+        <input type="checkbox" value="" checked>
+        <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'>
+          <path class="checked" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m5.5 10 3 3 6-6'/>
+          <path class="indeterminate" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5.5 10.5h8'/>
+        </svg>
+      </div>
       <span class="pt-1 form-checked-content">
         <strong>Finish sales report</strong>
         <small class="d-block text-body-secondary">
@@ -121,7 +145,13 @@ export const extra_css = ['list-groups.css']
       </span>
     </label>
     <label class="list-group-item d-flex gap-3">
-      <input class="form-check-input flex-shrink-0" type="checkbox" value="" style="font-size: 1.375em;">
+      <div class="check flex-shrink-0" style="font-size: 1.375em;">
+        <input type="checkbox" value="">
+        <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'>
+          <path class="checked" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m5.5 10 3 3 6-6'/>
+          <path class="indeterminate" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5.5 10.5h8'/>
+        </svg>
+      </div>
       <span class="pt-1 form-checked-content">
         <strong>Weekly All Hands</strong>
         <small class="d-block text-body-secondary">
@@ -131,7 +161,13 @@ export const extra_css = ['list-groups.css']
       </span>
     </label>
     <label class="list-group-item d-flex gap-3">
-      <input class="form-check-input flex-shrink-0" type="checkbox" value="" style="font-size: 1.375em;">
+      <div class="check flex-shrink-0" style="font-size: 1.375em;">
+        <input type="checkbox" value="">
+        <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'>
+          <path class="checked" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m5.5 10 3 3 6-6'/>
+          <path class="indeterminate" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5.5 10.5h8'/>
+        </svg>
+      </div>
       <span class="pt-1 form-checked-content">
         <strong>Out of office</strong>
         <small class="d-block text-body-secondary">
@@ -141,7 +177,13 @@ export const extra_css = ['list-groups.css']
       </span>
     </label>
     <label class="list-group-item d-flex gap-3 bg-body-tertiary">
-      <input class="form-check-input form-check-input-placeholder bg-body-tertiary flex-shrink-0 pe-none" disabled type="checkbox" value="" style="font-size: 1.375em;">
+      <div class="check check-input-placeholder bg-body-tertiary flex-shrink-0 pe-none" style="font-size: 1.375em;">
+        <input disabled type="checkbox" value="">
+        <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'>
+          <path class="checked" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m5.5 10 3 3 6-6'/>
+          <path class="indeterminate" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5.5 10.5h8'/>
+        </svg>
+      </div>
       <span class="pt-1 form-checked-content">
         <span contenteditable="true" class="w-100">Add new task...</span>
         <small class="d-block text-body-secondary">
@@ -157,25 +199,25 @@ export const extra_css = ['list-groups.css']
 
 <div class="d-flex flex-column md:flex-row p-4 gap-4 md:py-5 align-items-center justify-content-center">
   <div class="list-group list-group-checkable d-grid gap-2 border-0">
-    <input class="list-group-item-check pe-none" type="radio" name="listGroupCheckableRadios" id="listGroupCheckableRadios1" value="" checked>
+    <input class="radio list-group-item-check pe-none" type="radio" name="listGroupCheckableRadios" id="listGroupCheckableRadios1" value="" checked>
     <label class="list-group-item rounded-3 py-3" for="listGroupCheckableRadios1">
       First radio
       <span class="d-block small opacity-50">With support text underneath to add more detail</span>
     </label>
 
-    <input class="list-group-item-check pe-none" type="radio" name="listGroupCheckableRadios" id="listGroupCheckableRadios2" value="">
+    <input class="radio list-group-item-check pe-none" type="radio" name="listGroupCheckableRadios" id="listGroupCheckableRadios2" value="">
     <label class="list-group-item rounded-3 py-3" for="listGroupCheckableRadios2">
       Second radio
       <span class="d-block small opacity-50">Some other text goes here</span>
     </label>
 
-    <input class="list-group-item-check pe-none" type="radio" name="listGroupCheckableRadios" id="listGroupCheckableRadios3" value="">
+    <input class="radio list-group-item-check pe-none" type="radio" name="listGroupCheckableRadios" id="listGroupCheckableRadios3" value="">
     <label class="list-group-item rounded-3 py-3" for="listGroupCheckableRadios3">
       Third radio
       <span class="d-block small opacity-50">And we end with another snippet of text</span>
     </label>
 
-    <input class="list-group-item-check pe-none" type="radio" name="listGroupCheckableRadios" id="listGroupCheckableRadios4" value="" disabled>
+    <input class="radio list-group-item-check pe-none" type="radio" name="listGroupCheckableRadios" id="listGroupCheckableRadios4" value="" disabled>
     <label class="list-group-item rounded-3 py-3" for="listGroupCheckableRadios4">
       Fourth disabled radio
       <span class="d-block small opacity-50">This option is disabled</span>
@@ -188,7 +230,7 @@ export const extra_css = ['list-groups.css']
 <div class="d-flex flex-column md:flex-row p-4 gap-4 md:py-5 align-items-center justify-content-center">
   <div class="list-group list-group-radio d-grid gap-2 border-0">
     <div class="position-relative">
-      <input class="form-check-input position-absolute top-50 end-0 me-3 fs-5" type="radio" name="listGroupRadioGrid" id="listGroupRadioGrid1" value="" checked>
+      <input class="radio position-absolute top-50 end-0 me-3 fs-5" type="radio" name="listGroupRadioGrid" id="listGroupRadioGrid1" value="" checked>
       <label class="list-group-item py-3 pe-5" for="listGroupRadioGrid1">
         <strong class="fw-semibold">First radio</strong>
         <span class="d-block small opacity-75">With support text underneath to add more detail</span>
@@ -196,7 +238,7 @@ export const extra_css = ['list-groups.css']
     </div>
 
     <div class="position-relative">
-      <input class="form-check-input position-absolute top-50 end-0 me-3 fs-5" type="radio" name="listGroupRadioGrid" id="listGroupRadioGrid2" value="">
+      <input class="radio position-absolute top-50 end-0 me-3 fs-5" type="radio" name="listGroupRadioGrid" id="listGroupRadioGrid2" value="">
       <label class="list-group-item py-3 pe-5" for="listGroupRadioGrid2">
         <strong class="fw-semibold">Second radio</strong>
         <span class="d-block small opacity-75">Some other text goes here</span>
@@ -204,7 +246,7 @@ export const extra_css = ['list-groups.css']
     </div>
 
     <div class="position-relative">
-      <input class="form-check-input position-absolute top-50 end-0 me-3 fs-5" type="radio" name="listGroupRadioGrid" id="listGroupRadioGrid3" value="">
+      <input class="radio position-absolute top-50 end-0 me-3 fs-5" type="radio" name="listGroupRadioGrid" id="listGroupRadioGrid3" value="">
       <label class="list-group-item py-3 pe-5" for="listGroupRadioGrid3">
         <strong class="fw-semibold">Third radio</strong>
         <span class="d-block small opacity-75">And we end with another snippet of text</span>
@@ -212,7 +254,7 @@ export const extra_css = ['list-groups.css']
     </div>
 
     <div class="position-relative">
-      <input class="form-check-input position-absolute top-50 end-0 me-3 fs-5" type="radio" name="listGroupRadioGrid" id="listGroupRadioGrid4" value="" disabled>
+      <input class="radio position-absolute top-50 end-0 me-3 fs-5" type="radio" name="listGroupRadioGrid" id="listGroupRadioGrid4" value="" disabled>
       <label class="list-group-item py-3 pe-5" for="listGroupRadioGrid4">
         <strong class="fw-semibold">Fourth disabled radio</strong>
         <span class="d-block small opacity-75">This option is disabled</span>

diff --git a/site/src/assets/examples/list-groups/list-groups.css b/site/src/assets/examples/list-groups/list-groups.css
index fe3776489029cebdf7ec251ee8c23d8c72a2e791..fdb7e662092da0c090e10353ee4b66e415454aa7 100644 (file)
--- a/site/src/assets/examples/list-groups/list-groups.css
+++ b/site/src/assets/examples/list-groups/list-groups.css
@@ -4,11 +4,11 @@
   margin-inline: 1.5rem;
 }
 
-.form-check-input:checked + .form-checked-content {
+.check:has(input:checked) + .form-checked-content {
   opacity: .5;
 }
 
-.form-check-input-placeholder {
+.check-input-placeholder input {
   border-style: dashed;
 }
 [contenteditable]:focus {
@@ -41,7 +41,7 @@
   cursor: pointer;
   border-radius: .5rem;
 }
-.list-group-radio .form-check-input {
+.list-group-radio .radio {
   z-index: 2;
   margin-top: -.5em;
 }
@@ -50,13 +50,13 @@
   background-color: var(--bs-bs-bs-bs-bs-secondary-bg);
 }
 
-.list-group-radio .form-check-input:checked + .list-group-item {
+.list-group-radio .radio:checked + .list-group-item {
   background-color: var(--bs-bs-bs-bs-bs-body);
   border-color: var(--bs-bs-bs-bs-bs-primary);
   box-shadow: 0 0 0 2px var(--bs-bs-bs-bs-bs-primary);
 }
-.list-group-radio .form-check-input[disabled] + .list-group-item,
-.list-group-radio .form-check-input:disabled + .list-group-item {
+.list-group-radio .radio[disabled] + .list-group-item,
+.list-group-radio .radio:disabled + .list-group-item {
   pointer-events: none;
   filter: none;
   opacity: .5;

diff --git a/site/src/assets/examples/sign-in/index.astro b/site/src/assets/examples/sign-in/index.astro
index a86e7e892fd840eeed7644d22354aeeb730075aa..016dd15fe62b2576cd4c2dc2e4fe714813467960 100644 (file)
--- a/site/src/assets/examples/sign-in/index.astro
+++ b/site/src/assets/examples/sign-in/index.astro
@@ -20,9 +20,15 @@ export const body_class = 'd-flex align-items-center py-4 bg-body-tertiary'
       <label for="floatingPassword">Password</label>
     </div>
 
-    <div class="form-check text-start my-3">
-      <input class="form-check-input" type="checkbox" value="remember-me" id="checkDefault">
-      <label class="form-check-label" for="checkDefault">
+    <div class="form-field text-start my-3">
+      <div class="check">
+        <input type="checkbox" value="remember-me" id="checkDefault">
+        <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'>
+          <path class="checked" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m4 8 3 3 5-5'/>
+          <path class="indeterminate" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4.5 8.5h6'/>
+        </svg>
+      </div>
+      <label for="checkDefault">
         Remember me
       </label>
     </div>

diff --git a/site/src/content/docs/components/list-group.mdx b/site/src/content/docs/components/list-group.mdx
index d9e49abdb519a0a2636f189fcf77cd4d45d27001..c4244663efe77dbd554dcd948b6f4ad641fbf8fa 100644 (file)
--- a/site/src/content/docs/components/list-group.mdx
+++ b/site/src/content/docs/components/list-group.mdx
@@ -206,31 +206,55 @@ Place Bootstrap’s checkboxes and radios within list group items and customize
 
 <Example code={`<ul class="list-group">
     <li class="list-group-item">
-      <input class="form-check-input me-1" type="checkbox" value="" id="firstCheckbox">
-      <label class="form-check-label" for="firstCheckbox">First checkbox</label>
+      <div class="form-field">
+        <div class="check">
+          <input type="checkbox" value="" id="firstCheckbox">
+          <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'>
+            <path class="checked" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m5.5 10 3 3 6-6'/>
+            <path class="indeterminate" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5.5 10.5h8'/>
+          </svg>
+        </div>
+        <label for="firstCheckbox">First checkbox</label>
+      </div>
     </li>
     <li class="list-group-item">
-      <input class="form-check-input me-1" type="checkbox" value="" id="secondCheckbox">
-      <label class="form-check-label" for="secondCheckbox">Second checkbox</label>
+      <div class="form-field">
+        <div class="check">
+          <input type="checkbox" value="" id="secondCheckbox">
+          <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'>
+            <path class="checked" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m5.5 10 3 3 6-6'/>
+            <path class="indeterminate" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5.5 10.5h8'/>
+          </svg>
+        </div>
+        <label for="secondCheckbox">Second checkbox</label>
+      </div>
     </li>
     <li class="list-group-item">
-      <input class="form-check-input me-1" type="checkbox" value="" id="thirdCheckbox">
-      <label class="form-check-label" for="thirdCheckbox">Third checkbox</label>
+      <div class="form-field">
+        <div class="check">
+          <input type="checkbox" value="" id="thirdCheckbox">
+          <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'>
+            <path class="checked" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m5.5 10 3 3 6-6'/>
+            <path class="indeterminate" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5.5 10.5h8'/>
+          </svg>
+        </div>
+        <label for="thirdCheckbox">Third checkbox</label>
+      </div>
     </li>
   </ul>`} />
 
 <Example code={`<ul class="list-group">
     <li class="list-group-item">
-      <input class="form-check-input me-1" type="radio" name="listGroupRadio" value="" id="firstRadio" checked>
-      <label class="form-check-label" for="firstRadio">First radio</label>
+      <input class="radio me-1" type="radio" name="listGroupRadio" value="" id="firstRadio" checked>
+      <label for="firstRadio">First radio</label>
     </li>
     <li class="list-group-item">
-      <input class="form-check-input me-1" type="radio" name="listGroupRadio" value="" id="secondRadio">
-      <label class="form-check-label" for="secondRadio">Second radio</label>
+      <input class="radio me-1" type="radio" name="listGroupRadio" value="" id="secondRadio">
+      <label for="secondRadio">Second radio</label>
     </li>
     <li class="list-group-item">
-      <input class="form-check-input me-1" type="radio" name="listGroupRadio" value="" id="thirdRadio">
-      <label class="form-check-label" for="thirdRadio">Third radio</label>
+      <input class="radio me-1" type="radio" name="listGroupRadio" value="" id="thirdRadio">
+      <label for="thirdRadio">Third radio</label>
     </li>
   </ul>`} />
 
@@ -238,16 +262,40 @@ You can use `.stretched-link` on `<label>`s to make the whole list group item cl
 
 <Example code={`<ul class="list-group">
     <li class="list-group-item">
-      <input class="form-check-input me-1" type="checkbox" value="" id="firstCheckboxStretched">
-      <label class="form-check-label stretched-link" for="firstCheckboxStretched">First checkbox</label>
+      <div class="form-field">
+        <div class="check">
+          <input type="checkbox" value="" id="firstCheckboxStretched">
+          <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'>
+            <path class="checked" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m5.5 10 3 3 6-6'/>
+            <path class="indeterminate" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5.5 10.5h8'/>
+          </svg>
+        </div>
+        <label class="stretched-link" for="firstCheckboxStretched">First checkbox</label>
+      </div>
     </li>
     <li class="list-group-item">
-      <input class="form-check-input me-1" type="checkbox" value="" id="secondCheckboxStretched">
-      <label class="form-check-label stretched-link" for="secondCheckboxStretched">Second checkbox</label>
+      <div class="form-field">
+        <div class="check">
+          <input type="checkbox" value="" id="secondCheckboxStretched">
+          <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'>
+            <path class="checked" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m5.5 10 3 3 6-6'/>
+            <path class="indeterminate" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5.5 10.5h8'/>
+          </svg>
+        </div>
+        <label class="stretched-link" for="secondCheckboxStretched">Second checkbox</label>
+      </div>
     </li>
     <li class="list-group-item">
-      <input class="form-check-input me-1" type="checkbox" value="" id="thirdCheckboxStretched">
-      <label class="form-check-label stretched-link" for="thirdCheckboxStretched">Third checkbox</label>
+      <div class="form-field">
+        <div class="check">
+          <input type="checkbox" value="" id="thirdCheckboxStretched">
+          <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'>
+            <path class="checked" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m5.5 10 3 3 6-6'/>
+            <path class="indeterminate" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5.5 10.5h8'/>
+          </svg>
+        </div>
+        <label class="stretched-link" for="thirdCheckboxStretched">Third checkbox</label>
+      </div>
     </li>
   </ul>`} />
 

diff --git a/site/src/content/docs/forms/layout.mdx b/site/src/content/docs/forms/layout.mdx
index eebd53f3c1d5b116c7b31164f3f61f81216ab0b0..0a725bac0ddbac1aea687fb937b6e2e085b9c695 100644 (file)
--- a/site/src/content/docs/forms/layout.mdx
+++ b/site/src/content/docs/forms/layout.mdx
@@ -89,9 +89,15 @@ More complex layouts can also be created with the grid system.
       <input type="text" class="form-control" id="inputZip">
     </div>
     <div class="col-12">
-      <div class="form-check">
-        <input class="form-check-input" type="checkbox" id="gridCheck">
-        <label class="form-check-label" for="gridCheck">
+      <div class="form-field">
+        <div class="check">
+          <input type="checkbox" id="gridCheck">
+          <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'>
+            <path class="checked" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m4 8 3 3 5-5'/>
+            <path class="indeterminate" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4.5 8.5h6'/>
+          </svg>
+        </div>
+        <label for="gridCheck">
           Check me out
         </label>
       </div>
@@ -123,31 +129,39 @@ At times, you maybe need to use margin or padding utilities to create that perfe
     <fieldset class="row mb-3">
       <legend class="col-form-label sm:col-2 pt-0">Radios</legend>
       <div class="sm:col-10">
-        <div class="form-check">
-          <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios1" value="option1" checked>
-          <label class="form-check-label" for="gridRadios1">
-            First radio
-          </label>
-        </div>
-        <div class="form-check">
-          <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios2" value="option2">
-          <label class="form-check-label" for="gridRadios2">
-            Second radio
-          </label>
-        </div>
-        <div class="form-check disabled">
-          <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios3" value="option3" disabled>
-          <label class="form-check-label" for="gridRadios3">
-            Third disabled radio
-          </label>
+        <div class="form-group">
+          <div class="form-field mb-1">
+            <input type="radio" name="gridRadios" id="gridRadios1" value="option1" class="radio" checked>
+            <label for="gridRadios1">
+              First radio
+            </label>
+          </div>
+          <div class="form-field mb-1">
+            <input type="radio" name="gridRadios" id="gridRadios2" value="option2" class="radio">
+            <label for="gridRadios2">
+              Second radio
+            </label>
+          </div>
+          <div class="form-field">
+            <input type="radio" name="gridRadios" id="gridRadios3" value="option3" class="radio" disabled>
+            <label for="gridRadios3">
+              Third disabled radio
+            </label>
+          </div>
         </div>
       </div>
     </fieldset>
     <div class="row mb-3">
       <div class="sm:col-10 sm:offset-2">
-        <div class="form-check">
-          <input class="form-check-input" type="checkbox" id="gridCheck1">
-          <label class="form-check-label" for="gridCheck1">
+        <div class="form-field">
+          <div class="check">
+            <input type="checkbox" id="gridCheck1">
+            <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'>
+              <path class="checked" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m4 8 3 3 5-5'/>
+              <path class="indeterminate" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4.5 8.5h6'/>
+            </svg>
+          </div>
+          <label for="gridCheck1">
             Example checkbox
           </label>
         </div>
@@ -221,9 +235,15 @@ The example below uses a flexbox utility to vertically center the contents and c
       </select>
     </div>
     <div class="col-auto">
-      <div class="form-check">
-        <input class="form-check-input" type="checkbox" id="autoSizingCheck">
-        <label class="form-check-label" for="autoSizingCheck">
+      <div class="form-field">
+        <div class="check">
+          <input type="checkbox" id="autoSizingCheck">
+          <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'>
+            <path class="checked" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m4 8 3 3 5-5'/>
+            <path class="indeterminate" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4.5 8.5h6'/>
+          </svg>
+        </div>
+        <label for="autoSizingCheck">
           Remember me
         </label>
       </div>
@@ -257,9 +277,15 @@ You can then remix that once again with size-specific column classes.
       </select>
     </div>
     <div class="col-auto">
-      <div class="form-check">
-        <input class="form-check-input" type="checkbox" id="autoSizingCheck2">
-        <label class="form-check-label" for="autoSizingCheck2">
+      <div class="form-field">
+        <div class="check">
+          <input type="checkbox" id="autoSizingCheck2">
+          <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'>
+            <path class="checked" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m4 8 3 3 5-5'/>
+            <path class="indeterminate" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4.5 8.5h6'/>
+          </svg>
+        </div>
+        <label for="autoSizingCheck2">
           Remember me
         </label>
       </div>
@@ -271,7 +297,7 @@ You can then remix that once again with size-specific column classes.
 
 ## Inline forms
 
-Use the `.row-cols-*` classes to create responsive horizontal layouts. By adding [gutter modifier classes]([[docsref:/layout/gutters]]), we'll have gutters in horizontal and vertical directions. On narrow mobile viewports, the `.col-12` helps stack the form controls and more. The `.align-items-center` aligns the form elements to the middle, making the `.form-check` align properly.
+Use the `.row-cols-*` classes to create responsive horizontal layouts. By adding [gutter modifier classes]([[docsref:/layout/gutters]]), we'll have gutters in horizontal and vertical directions. On narrow mobile viewports, the `.col-12` helps stack the form controls and more. The `.align-items-center` aligns the form elements to the middle, making checkboxes and labels align properly.
 
 <Example code={`<form class="row lg:row-cols-auto g-3 align-items-center">
     <div class="col-12">
@@ -293,9 +319,15 @@ Use the `.row-cols-*` classes to create responsive horizontal layouts. By adding
     </div>
 
     <div class="col-12">
-      <div class="form-check">
-        <input class="form-check-input" type="checkbox" id="inlineFormCheck">
-        <label class="form-check-label" for="inlineFormCheck">
+      <div class="form-field">
+        <div class="check">
+          <input type="checkbox" id="inlineFormCheck">
+          <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'>
+            <path class="checked" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m4 8 3 3 5-5'/>
+            <path class="indeterminate" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4.5 8.5h6'/>
+          </svg>
+        </div>
+        <label for="inlineFormCheck">
           Remember me
         </label>
       </div>

diff --git a/site/src/content/docs/forms/overview.mdx b/site/src/content/docs/forms/overview.mdx
index 9221e3dfb1812f58f35738f6ab05c46c7576c62d..38a442712d00bf25f4ca3c90439cecd4d1aa8636 100644 (file)
--- a/site/src/content/docs/forms/overview.mdx
+++ b/site/src/content/docs/forms/overview.mdx
@@ -40,9 +40,15 @@ Here’s a quick example to demonstrate Bootstrap’s form styles. Keep reading
       <label for="exampleInputPassword1" class="form-label">Password</label>
       <input type="password" class="form-control" id="exampleInputPassword1">
     </div>
-    <div class="mb-3 form-check">
-      <input type="checkbox" class="form-check-input" id="exampleCheck1">
-      <label class="form-check-label" for="exampleCheck1">Check me out</label>
+    <div class="mb-3 form-field">
+      <div class="check">
+        <input type="checkbox" id="exampleCheck1">
+        <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'>
+          <path class="checked" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m4 8 3 3 5-5'/>
+          <path class="indeterminate" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4.5 8.5h6'/>
+        </svg>
+      </div>
+      <label for="exampleCheck1">Check me out</label>
     </div>
     <button type="submit" class="btn-solid theme-primary">Submit</button>
   </form>`} />
@@ -72,13 +78,17 @@ However, if your form also includes custom button-like elements such as `<a clas
           <option>Disabled select</option>
         </select>
       </div>
-      <div class="mb-3">
-        <div class="form-check">
-          <input class="form-check-input" type="checkbox" id="disabledFieldsetCheck" disabled>
-          <label class="form-check-label" for="disabledFieldsetCheck">
-            Can’t check this
-          </label>
+      <div class="mb-3 form-field">
+        <div class="check">
+          <input type="checkbox" id="disabledFieldsetCheck" disabled>
+          <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'>
+            <path class="checked" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m4 8 3 3 5-5'/>
+            <path class="indeterminate" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4.5 8.5h6'/>
+          </svg>
         </div>
+        <label for="disabledFieldsetCheck">
+          Can’t check this
+        </label>
       </div>
       <button type="submit" class="btn-solid theme-primary">Submit</button>
     </fieldset>