Skip to content

Commit 15099a0

Browse files
coliffcoliff
authored
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
1 parent c001839 commit 15099a0

9 files changed

Lines changed: 311 additions & 136 deletions

File tree

‎site/src/assets/examples/cheatsheet/index.astro‎

Lines changed: 50 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -332,28 +332,36 @@ export const body_class = 'bg-body-tertiary'
332332
<option value="3">Three</option>
333333
</select>
334334
</div>
335-
<div class="mb-3 form-check">
336-
<input type="checkbox" class="form-check-input" id="exampleCheck1">
337-
<label class="form-check-label" for="exampleCheck1">Check me out</label>
335+
<div class="mb-3 form-field">
336+
<div class="check">
337+
<input type="checkbox" id="exampleCheck1">
338+
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'>
339+
<path class="checked" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m4 8 3 3 5-5'/>
340+
<path class="indeterminate" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4.5 8.5h6'/>
341+
</svg>
342+
</div>
343+
<label for="exampleCheck1">Check me out</label>
338344
</div>
339345
<fieldset class="mb-3">
340346
<legend>Radios buttons</legend>
341-
<div class="form-check">
342-
<input type="radio" name="radios" class="form-check-input" id="exampleRadio1">
343-
<label class="form-check-label" for="exampleRadio1">Default radio</label>
347+
<div class="form-field">
348+
<input type="radio" name="radios" class="radio" id="exampleRadio1">
349+
<label for="exampleRadio1">Default radio</label>
344350
</div>
345-
<div class="mb-3 form-check">
346-
<input type="radio" name="radios" class="form-check-input" id="exampleRadio2">
347-
<label class="form-check-label" for="exampleRadio2">Another radio</label>
351+
<div class="mb-3 form-field">
352+
<input type="radio" name="radios" class="radio" id="exampleRadio2">
353+
<label for="exampleRadio2">Another radio</label>
348354
</div>
349355
</fieldset>
350356
<div class="mb-3">
351357
<label class="form-label" for="customFile">Upload</label>
352358
<input type="file" class="form-control" id="customFile">
353359
</div>
354-
<div class="mb-3 form-check form-switch">
355-
<input class="form-check-input" type="checkbox" role="switch" id="switchCheckChecked" checked>
356-
<label class="form-check-label" for="switchCheckChecked">Checked switch checkbox input</label>
360+
<div class="mb-3 form-field">
361+
<div class="switch">
362+
<input type="checkbox" role="switch" id="switchCheckChecked" checked>
363+
</div>
364+
<label for="switchCheckChecked">Checked switch checkbox input</label>
357365
</div>
358366
<div class="mb-3">
359367
<label for="customRange3" class="form-label">Example range</label>
@@ -383,32 +391,38 @@ export const body_class = 'bg-body-tertiary'
383391
<option>Disabled select</option>
384392
</select>
385393
</div>
386-
<div class="mb-3">
387-
<div class="form-check">
388-
<input class="form-check-input" type="checkbox" id="disabledFieldsetCheck" disabled>
389-
<label class="form-check-label" for="disabledFieldsetCheck">
390-
Can't check this
391-
</label>
394+
<div class="mb-3 form-field">
395+
<div class="check">
396+
<input type="checkbox" id="disabledFieldsetCheck" disabled>
397+
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'>
398+
<path class="checked" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m4 8 3 3 5-5'/>
399+
<path class="indeterminate" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4.5 8.5h6'/>
400+
</svg>
392401
</div>
402+
<label for="disabledFieldsetCheck">
403+
Can't check this
404+
</label>
393405
</div>
394406
<fieldset class="mb-3">
395407
<legend>Disabled radios buttons</legend>
396-
<div class="form-check">
397-
<input type="radio" name="radios" class="form-check-input" id="disabledRadio1" disabled>
398-
<label class="form-check-label" for="disabledRadio1">Disabled radio</label>
408+
<div class="form-field">
409+
<input type="radio" name="radios" class="radio" id="disabledRadio1" disabled>
410+
<label for="disabledRadio1">Disabled radio</label>
399411
</div>
400-
<div class="mb-3 form-check">
401-
<input type="radio" name="radios" class="form-check-input" id="disabledRadio2" disabled>
402-
<label class="form-check-label" for="disabledRadio2">Another radio</label>
412+
<div class="mb-3 form-field">
413+
<input type="radio" name="radios" class="radio" id="disabledRadio2" disabled>
414+
<label for="disabledRadio2">Another radio</label>
403415
</div>
404416
</fieldset>
405417
<div class="mb-3">
406418
<label class="form-label" for="disabledCustomFile">Upload</label>
407419
<input type="file" class="form-control" id="disabledCustomFile" disabled>
408420
</div>
409-
<div class="mb-3 form-check form-switch">
410-
<input class="form-check-input" type="checkbox" role="switch" id="disabledSwitchCheckChecked" checked disabled>
411-
<label class="form-check-label" for="disabledSwitchCheckChecked">Disabled checked switch checkbox input</label>
421+
<div class="mb-3 form-field">
422+
<div class="switch">
423+
<input type="checkbox" role="switch" id="disabledSwitchCheckChecked" checked disabled>
424+
</div>
425+
<label for="disabledSwitchCheckChecked">Disabled checked switch checkbox input</label>
412426
</div>
413427
<div class="mb-3">
414428
<label for="disabledRange" class="form-label">Disabled range</label>
@@ -572,9 +586,15 @@ export const body_class = 'bg-body-tertiary'
572586
</div>
573587
</div>
574588
<div class="col-12">
575-
<div class="form-check">
576-
<input class="form-check-input is-invalid" type="checkbox" value="" id="invalidCheck3" required>
577-
<label class="form-check-label" for="invalidCheck3">
589+
<div class="form-field">
590+
<div class="check">
591+
<input class="is-invalid" type="checkbox" value="" id="invalidCheck3" required>
592+
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'>
593+
<path class="checked" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m4 8 3 3 5-5'/>
594+
<path class="indeterminate" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4.5 8.5h6'/>
595+
</svg>
596+
</div>
597+
<label for="invalidCheck3">
578598
Agree to terms and conditions
579599
</label>
580600
<div class="invalid-feedback">

‎site/src/assets/examples/checkout/index.astro‎

Lines changed: 27 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -148,32 +148,44 @@ export const body_class = 'bg-body-tertiary'
148148

149149
<hr class="my-4">
150150

151-
<div class="form-check">
152-
<input type="checkbox" class="form-check-input" id="same-address">
153-
<label class="form-check-label" for="same-address">Shipping address is the same as my billing address</label>
151+
<div class="form-field">
152+
<div class="check">
153+
<input type="checkbox" id="same-address">
154+
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'>
155+
<path class="checked" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m4 8 3 3 5-5'/>
156+
<path class="indeterminate" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4.5 8.5h6'/>
157+
</svg>
158+
</div>
159+
<label for="same-address">Shipping address is the same as my billing address</label>
154160
</div>
155161

156-
<div class="form-check">
157-
<input type="checkbox" class="form-check-input" id="save-info">
158-
<label class="form-check-label" for="save-info">Save this information for next time</label>
162+
<div class="form-field">
163+
<div class="check">
164+
<input type="checkbox" id="save-info">
165+
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'>
166+
<path class="checked" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m4 8 3 3 5-5'/>
167+
<path class="indeterminate" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4.5 8.5h6'/>
168+
</svg>
169+
</div>
170+
<label for="save-info">Save this information for next time</label>
159171
</div>
160172

161173
<hr class="my-4">
162174

163175
<h4 class="mb-3">Payment</h4>
164176

165177
<div class="my-3">
166-
<div class="form-check">
167-
<input id="credit" name="paymentMethod" type="radio" class="form-check-input" checked required>
168-
<label class="form-check-label" for="credit">Credit card</label>
178+
<div class="form-field">
179+
<input id="credit" name="paymentMethod" type="radio" class="radio" checked required>
180+
<label for="credit">Credit card</label>
169181
</div>
170-
<div class="form-check">
171-
<input id="debit" name="paymentMethod" type="radio" class="form-check-input" required>
172-
<label class="form-check-label" for="debit">Debit card</label>
182+
<div class="form-field">
183+
<input id="debit" name="paymentMethod" type="radio" class="radio" required>
184+
<label for="debit">Debit card</label>
173185
</div>
174-
<div class="form-check">
175-
<input id="paypal" name="paymentMethod" type="radio" class="form-check-input" required>
176-
<label class="form-check-label" for="paypal">PayPal</label>
186+
<div class="form-field">
187+
<input id="paypal" name="paymentMethod" type="radio" class="radio" required>
188+
<label for="paypal">PayPal</label>
177189
</div>
178190
</div>
179191

‎site/src/assets/examples/heroes/index.astro‎

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -74,10 +74,15 @@ export const extra_css = ['heroes.css']
7474
<input type="password" class="form-control" id="floatingPassword" placeholder="Password">
7575
<label for="floatingPassword">Password</label>
7676
</div>
77-
<div class="checkbox mb-3">
78-
<label>
79-
<input type="checkbox" value="remember-me"> Remember me
80-
</label>
77+
<div class="form-field mb-3">
78+
<div class="check">
79+
<input type="checkbox" value="remember-me" id="heroRememberMe">
80+
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'>
81+
<path class="checked" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m4 8 3 3 5-5'/>
82+
<path class="indeterminate" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4.5 8.5h6'/>
83+
</svg>
84+
</div>
85+
<label for="heroRememberMe">Remember me</label>
8186
</div>
8287
<button class="w-100 btn-solid theme-primary btn-lg" type="submit">Sign up</button>
8388
<hr class="my-4">

0 commit comments

Comments
 (0)