Form check markup by mdo · Pull Request #23444 · twbs/bootstrap

mdo · 2017-08-15T05:09:39Z

This fixes #23426, but might constitute as a breaking change.

What changes

Validating an input within our .form-check component is straightforward—it'll handle :valid and :invalid with ease. However, styling the label's text based on the input's state is another thing. Let's look at what we have now:

<div class="form-check">
  <label class="form-check-label">
    <input type="checkbox" class="form-check-input">
    Check me out
  </label>
</div>

With the above HTML, you cannot style Check me out in CSS based on .form-check-input's state. To make that happen, we need a sibling element to style, something like:

<div class="form-check">
  <label class="form-check-label">
    <input type="checkbox" class="form-check-input">
    <span class="form-check-description">Check me out</span>
  </label>
</div>

That's what this PR changes all our checkboxes and radios to. This matches custom forms more and enables CSS-only validation of checkboxes/radios.

Breaking or non-breaking?

So, why the question of maybe breaks backward compatibility? It's not strictly required. Right now, there's no need to include it for anything but validation. However, it could help improve styling of disabled inputs as well. Here's the current CSS for disabled .form-checks, which requires a parent class:

bootstrap/scss/_forms.scss

Lines 218 to 228 in 5b8738a

    
           .form-check { 
        
             position: relative; 
        
             display: block; 
        
             margin-bottom: $form-check-margin-bottom; 
        
             &.disabled { 
        
               .form-check-label { 
        
                 color: $text-muted; 
        
               } 
        
             } 
        
           }

With this change, we could do:

.form-check {
  position: relative;
  display: block;
  margin-bottom: $form-check-margin-bottom;
}

.form-check-input:disabled {
  + .form-check-description {
    color: $text-muted;
  }
}

Thoughts?

…can style the text based on the input's state

hiddewie · 2017-08-15T08:18:34Z

I agree this is a fix for #23426, however it does not address the issue where a whole set of radio buttons or checkboxes is valid/invalid, with an invalid description for the whole set.

Considering just server side validation, a value for a field (which might be a single value <-> radio buttons, or multiple values <-> checkboxes) is invalid. This means that not the <input>s themselves should get the .is-invalid class, but maybe the <fieldset> containing the inputs. However the <fieldset> would not have .form-control which does not render invalid form elements as invalid, or the invalid description.

See the image for a more detailed view of what I mean. It was made with BS alpha 4 I believe.

… pattern to Form Check

…dicator`

… pattern

acidghost · 2017-09-23T11:26:37Z

What is the status of this PR? If it is likely that the .form-check-description change will happen, I'll monkey patch my code for the time being.

I see the problem @hiddewie shows, wouldn't adding something like the following work?

fieldset.is-#{state} {
    .form-check-description {
        color: $color;
    }
}

mdo · 2017-10-02T04:38:59Z

Status is this needs reviewing, testing, and ideally merging :).

mdo · 2017-11-25T20:00:22Z

Need to look at #23503 as well.

… use span

mdo · 2017-12-21T22:15:41Z

Superseded by #25050.

mdo added 2 commits August 14, 2017 21:58

Update comment and change class name for validation

735bdf7

Update checkbox/radio code to include .form-check-description so you …

4a6b494

…can style the text based on the input's state

mdo mentioned this pull request Aug 15, 2017

Non-custom checkboxes don't change with .is-invalid #23426

Closed

XhmikosR added css v4 labels Aug 15, 2017

pat270 mentioned this pull request Aug 15, 2017

Normalize Custom Checkbox and Radio with Form Check #23449

Closed

GBH mentioned this pull request Sep 6, 2017

Errors on checkboxes and radio buttons are not showing up GBH/phoenix_bootstrap_form#1

Closed

pat270 added 3 commits September 21, 2017 14:37

(Fixes #23449) Custom Checkbox and Radio markup should follow similar…

0cba25c

… pattern to Form Check

Position .custom-control-input in same place as `.custom-control-in…

0e141a8

…dicator`

v4 docs Update markup in Custom Checkbox and Radio docs to follow new…

627166d

… pattern

twisty mentioned this pull request Oct 24, 2017

Custom style for checkboxes twisty/formsy-react-components#116

Closed

This was referenced Oct 27, 2017

[Informational] Bootstrap V4.beta 1, 2 & 3 ship list bootstrap-vue/bootstrap-vue#747

Closed

feat(form-radio+form-checkbox): Prep for BSV4.beta.3 plain checkbox/radio validation styling bootstrap-vue/bootstrap-vue#1253

Merged

istratos mentioned this pull request Oct 31, 2017

What’s the correct mark-up for custom radios and server-side validation? #24624

Closed

mdo and others added 5 commits November 25, 2017 19:12

Merge branch 'v4-dev' into form-check-markup

7792e37

Merge branch 'v4-dev' into normalize-custom-controls

352fcd6

update css to use disabled attr, update inline check code snippets to…

7fb91d5

… use span

Merge branch 'pat270-normalize-custom-controls' into form-check-markup

850c682

add note to migration docs about checks, rewrite some other changes

73b995e

This was referenced Nov 27, 2017

(Fixes #23449) Normalize Custom Checkbox and Radio with Form Check #23503

Closed

Custom stacked checkbox label stretches to full width #24888

Closed

mdo added 5 commits November 27, 2017 14:52

feedback validation for checks

1a4bf7e

Merge branch 'v4-dev' into form-check-markup

db4e099

With different markup, we need to tweak the y position of the input

7b25859

hopefully undo those checked in changes

840ef6e

reset those too

541e465

fix invalid markup

94b44fd

mdo mentioned this pull request Dec 21, 2017

Form check markup v2 #25050

Merged

mdo closed this Dec 21, 2017

mdo deleted the form-check-markup branch December 22, 2017 18:12

hiddewie mentioned this pull request Dec 23, 2017

Support for server-side validation for form grouping constructs #25060

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Form check markup#23444

Form check markup#23444
mdo wants to merge 16 commits intov4-devfrom
form-check-markup

mdo commented Aug 15, 2017

Uh oh!

hiddewie commented Aug 15, 2017

Uh oh!

acidghost commented Sep 23, 2017

Uh oh!

mdo commented Oct 2, 2017

Uh oh!

mdo commented Nov 25, 2017 •

edited

Loading

Uh oh!

mdo commented Dec 21, 2017

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

	.form-check {
	position: relative;
	display: block;
	margin-bottom: $form-check-margin-bottom;

	&.disabled {
	.form-check-label {
	color: $text-muted;
	}
	}
	}

Uh oh!

Conversation

mdo commented Aug 15, 2017

What changes

Breaking or non-breaking?

Uh oh!

hiddewie commented Aug 15, 2017

Uh oh!

acidghost commented Sep 23, 2017

Uh oh!

mdo commented Oct 2, 2017

Uh oh!

mdo commented Nov 25, 2017 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

mdo commented Dec 21, 2017

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

mdo commented Nov 25, 2017 •

edited

Loading