rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2024-11-28 10:24:19 +01:00
Code Issues Actions Packages Releases Activity

Form check markup v2 (#25050)

Browse Source 
* match layout behaviors

* ditch the indicator as separate element for psuedo-elements on the label

* move disabled to attribute only on input

* redo default inline check to support new markup

* redo inline forms

* clean up vars

* update validation mixin to new structure

* update checks in docs

* linting for for/id attributes
This commit is contained in:
Mark Otto 2017-12-22 16:13:01 -08:00 committed by GitHub
parent 13150872c6
commit 16f1417240
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 235 additions and 268 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
docs/4.0/components/dropdowns.md
View File

@ -615,8 +615,8 @@ Put a form within a dropdown menu, or make it into a dropdown menu, and use [mar
<input type="password" class="form-control" id="exampleDropdownFormPassword1" placeholder="Password"> <input type="password" class="form-control" id="exampleDropdownFormPassword1" placeholder="Password">
</div> </div>
<div class="form-check"> <div class="form-check">
<label class="form-check-label"> <input type="checkbox" class="form-check-input" id="dropdownCheck">
<input type="checkbox" class="form-check-input"> <label class="form-check-label" for="dropdownCheck">
Remember me Remember me
</label> </label>
</div> </div>
@ -639,8 +639,8 @@ Put a form within a dropdown menu, or make it into a dropdown menu, and use [mar
<input type="password" class="form-control" id="exampleDropdownFormPassword2" placeholder="Password"> <input type="password" class="form-control" id="exampleDropdownFormPassword2" placeholder="Password">
</div> </div>
<div class="form-check"> <div class="form-check">
<label class="form-check-label"> <input type="checkbox" class="form-check-input" id="dropdownCheck2">
<input type="checkbox" class="form-check-input"> <label class="form-check-label" for="dropdownCheck2">
Remember me Remember me
</label> </label>
</div> </div>

301
docs/4.0/components/forms.md
View File

@ -26,10 +26,8 @@ Here's a quick example to demonstrate Bootstrap's form styles. Keep reading for
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password"> <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div> </div>
<div class="form-check"> <div class="form-check">
<label class="form-check-label"> <input type="checkbox" class="form-check-input" id="exampleCheck1">
<input type="checkbox" class="form-check-input"> <label class="form-check-label" for="exampleCheck1">Check me out</label>
Check me out
</label>
</div> </div>
<button type="submit" class="btn btn-primary">Submit</button> <button type="submit" class="btn btn-primary">Submit</button>
</form> </form>
@ -154,7 +152,9 @@ If you want to have `<input readonly>` elements in your form styled as plain tex
Default checkboxes and radios are improved upon with the help of `.form-check`, **a single class for both input types that improves the layout and behavior of their HTML elements**. Checkboxes are for selecting one or several options in a list, while radios are for selecting one option from many. Default checkboxes and radios are improved upon with the help of `.form-check`, **a single class for both input types that improves the layout and behavior of their HTML elements**. Checkboxes are for selecting one or several options in a list, while radios are for selecting one option from many.
Disabled checkboxes and radios are supported, but to provide a `not-allowed` cursor on hover of the parent `<label>`, you'll need to add the `.disabled` class to the parent `.form-check`. The disabled class will also lighten the text color to help indicate the input's state. Disabled checkboxes and radios are supported, but to provide a `not-allowed` cursor on hover of the parent `<label>`, you'll need to add the `disabled` attribute to the `.form-check-input`. The disabled attribute will apply a lighter color to help indicate the input's state.
Checkboxes and radios use are built to support HTML-based form validation and provide concise, accessible labels. As such, our `<input>`s and `<label>`s are sibling elements as opposed to an `<input>` within a `<label>`. This is slightly more verbose as you must specify `id` and `for` attributes to relate the `<input>` and `<label>`.
### Default (stacked) ### Default (stacked)
@ -162,36 +162,36 @@ By default, any number of checkboxes and radios that are immediate sibling will
{% example html %} {% example html %}
<div class="form-check"> <div class="form-check">
<label class="form-check-label"> <input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
<input class="form-check-input" type="checkbox" value=""> <label class="form-check-label" for="defaultCheck1">
Option one is this and that&mdash;be sure to include why it's great Default checkbox
</label> </label>
</div> </div>
<div class="form-check disabled"> <div class="form-check">
<label class="form-check-label"> <input class="form-check-input" type="checkbox" value="" id="defaultCheck2" disabled>
<input class="form-check-input" type="checkbox" value="" disabled> <label class="form-check-label" for="defaultCheck2">
Option two is disabled Disabled checkbox
</label> </label>
</div> </div>
{% endexample %} {% endexample %}
{% example html %} {% example html %}
<div class="form-check"> <div class="form-check">
<label class="form-check-label"> <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked>
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked> <label class="form-check-label" for="exampleRadios1">
Option one is this and that&mdash;be sure to include why it's great Default radio
</label> </label>
</div> </div>
<div class="form-check"> <div class="form-check">
<label class="form-check-label"> <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2"> <label class="form-check-label" for="exampleRadios2">
Option two can be something else and selecting it will deselect option one Second default radio
</label> </label>
</div> </div>
<div class="form-check disabled"> <div class="form-check disabled">
<label class="form-check-label"> <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios3" value="option3" disabled>
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios3" value="option3" disabled> <label class="form-check-label" for="exampleRadios3">
Option three is disabled Disabled radio
</label> </label>
</div> </div>
{% endexample %} {% endexample %}
@ -202,37 +202,31 @@ Group checkboxes or radios on the same horizontal row by adding `.form-check-inl
{% example html %} {% example html %}
<div class="form-check form-check-inline"> <div class="form-check form-check-inline">
<label class="form-check-label"> <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
<input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1"> 1 <label class="form-check-label" for="inlineCheckbox1">1</label>
</label>
</div> </div>
<div class="form-check form-check-inline"> <div class="form-check form-check-inline">
<label class="form-check-label"> <input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2">
<input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2"> 2 <label class="form-check-label" for="inlineCheckbox2">2</label>
</label>
</div> </div>
<div class="form-check form-check-inline disabled"> <div class="form-check form-check-inline">
<label class="form-check-label"> <input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3" disabled>
<input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3" disabled> 3 <label class="form-check-label" for="inlineCheckbox3">3 (disabled)</label>
</label>
</div> </div>
{% endexample %} {% endexample %}
{% example html %} {% example html %}
<div class="form-check form-check-inline"> <div class="form-check form-check-inline">
<label class="form-check-label"> <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1 <label class="form-check-label" for="inlineRadio1">1</label>
</label>
</div> </div>
<div class="form-check form-check-inline"> <div class="form-check form-check-inline">
<label class="form-check-label"> <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2 <label class="form-check-label" for="inlineRadio2">2</label>
</label>
</div> </div>
<div class="form-check form-check-inline disabled"> <div class="form-check form-check-inline">
<label class="form-check-label"> <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3" disabled>
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3" disabled> 3 <label class="form-check-label" for="inlineRadio3">3 (disabled)</label>
</label>
</div> </div>
{% endexample %} {% endexample %}
@ -242,14 +236,10 @@ Add `.position-static` to inputs within `.form-check` that don't have any label
{% example html %} {% example html %}
<div class="form-check"> <div class="form-check">
<label class="form-check-label"> <input class="form-check-input position-static" type="checkbox" id="blankCheckbox" value="option1" aria-label="...">
<input class="form-check-input position-static" type="checkbox" id="blankCheckbox" value="option1" aria-label="...">
</label>
</div> </div>
<div class="form-check"> <div class="form-check">
<label class="form-check-label"> <input class="form-check-input position-static" type="radio" name="blankRadio" id="blankRadio1" value="option1" aria-label="...">
<input class="form-check-input position-static" type="radio" name="blankRadio" id="blankRadio1" value="option1" aria-label="...">
</label>
</div> </div>
{% endexample %} {% endexample %}
@ -349,8 +339,9 @@ More complex layouts can also be created with the grid system.
</div> </div>
<div class="form-group"> <div class="form-group">
<div class="form-check"> <div class="form-check">
<label class="form-check-label"> <input class="form-check-input" type="checkbox" id="gridCheck">
<input class="form-check-input" type="checkbox"> Check me out <label class="form-check-label" for="gridCheck">
Check me out
</label> </label>
</div> </div>
</div> </div>
@ -383,21 +374,21 @@ At times, you maybe need to use margin or padding utilities to create that perfe
<legend class="col-form-label col-sm-2 pt-0">Radios</legend> <legend class="col-form-label col-sm-2 pt-0">Radios</legend>
<div class="col-sm-10"> <div class="col-sm-10">
<div class="form-check"> <div class="form-check">
<label class="form-check-label"> <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios1" value="option1" checked>
<input class="form-check-input" type="radio" name="gridRadios" id="gridRadios1" value="option1" checked> <label class="form-check-label" for="gridRadios1">
Option one is this and that&mdash;be sure to include why it's great First radio
</label> </label>
</div> </div>
<div class="form-check"> <div class="form-check">
<label class="form-check-label"> <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios2" value="option2">
<input class="form-check-input" type="radio" name="gridRadios" id="gridRadios2" value="option2"> <label class="form-check-label" for="gridRadios2">
Option two can be something else and selecting it will deselect option one Second radio
</label> </label>
</div> </div>
<div class="form-check disabled"> <div class="form-check disabled">
<label class="form-check-label"> <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios3" value="option3" disabled>
<input class="form-check-input" type="radio" name="gridRadios" id="gridRadios3" value="option3" disabled> <label class="form-check-label" for="gridRadios3">
Option three is disabled Third disabled radio
</label> </label>
</div> </div>
</div> </div>
@ -407,8 +398,9 @@ At times, you maybe need to use margin or padding utilities to create that perfe
<div class="col-sm-2">Checkbox</div> <div class="col-sm-2">Checkbox</div>
<div class="col-sm-10"> <div class="col-sm-10">
<div class="form-check"> <div class="form-check">
<label class="form-check-label"> <input class="form-check-input" type="checkbox" id="gridCheck1">
<input class="form-check-input" type="checkbox"> Check me out <label class="form-check-label" for="gridCheck1">
Example checkbox
</label> </label>
</div> </div>
</div> </div>
@ -490,8 +482,9 @@ The example below uses a flexbox utility to vertically center the contents and c
</div> </div>
<div class="col-auto"> <div class="col-auto">
<div class="form-check mb-2"> <div class="form-check mb-2">
<label class="form-check-label"> <input class="form-check-input" type="checkbox" id="autoSizingCheck">
<input class="form-check-input" type="checkbox"> Remember me <label class="form-check-label" for="autoSizingCheck">
Remember me
</label> </label>
</div> </div>
</div> </div>
@ -507,27 +500,28 @@ You can then remix that once again with size-specific column classes.
{% example html %} {% example html %}
<form> <form>
<div class="form-row align-items-center"> <div class="form-row align-items-center">
<div class="col-sm-3"> <div class="col-sm-3 my-1">
<label class="sr-only" for="inlineFormInputName">Name</label> <label class="sr-only" for="inlineFormInputName">Name</label>
<input type="text" class="form-control mb-2 mb-sm-0" id="inlineFormInputName" placeholder="Jane Doe"> <input type="text" class="form-control" id="inlineFormInputName" placeholder="Jane Doe">
</div> </div>
<div class="col-sm-3"> <div class="col-sm-3 my-1">
<label class="sr-only" for="inlineFormInputGroupUsername">Username</label> <label class="sr-only" for="inlineFormInputGroupUsername">Username</label>
<div class="input-group mb-2 mb-sm-0"> <div class="input-group">
<div class="input-group-prepend"> <div class="input-group-prepend">
<div class="input-group-text">@</div> <div class="input-group-text">@</div>
</div> </div>
<input type="text" class="form-control" id="inlineFormInputGroupUsername" placeholder="Username"> <input type="text" class="form-control" id="inlineFormInputGroupUsername" placeholder="Username">
</div> </div>
</div> </div>
<div class="col-auto"> <div class="col-auto my-1">
<div class="form-check mb-2 mb-sm-0"> <div class="form-check">
<label class="form-check-label"> <input class="form-check-input" type="checkbox" id="autoSizingCheck2">
<input class="form-check-input" type="checkbox"> Remember me <label class="form-check-label" for="autoSizingCheck2">
Remember me
</label> </label>
</div> </div>
</div> </div>
<div class="col-auto"> <div class="col-auto my-1">
<button type="submit" class="btn btn-primary">Submit</button> <button type="submit" class="btn btn-primary">Submit</button>
</div> </div>
</div> </div>
@ -539,24 +533,23 @@ And of course [custom form controls](#custom-forms) are supported.
{% example html %} {% example html %}
<form> <form>
<div class="form-row align-items-center"> <div class="form-row align-items-center">
<div class="col-auto"> <div class="col-auto my-1">
<label class="mr-sm-2" for="inlineFormCustomSelect">Preference</label> <label class="mr-sm-2" for="inlineFormCustomSelect">Preference</label>
<select class="custom-select mb-2 mr-sm-2" id="inlineFormCustomSelect"> <select class="custom-select mr-sm-2" id="inlineFormCustomSelect">
<option selected>Choose...</option> <option selected>Choose...</option>
<option value="1">One</option> <option value="1">One</option>
<option value="2">Two</option> <option value="2">Two</option>
<option value="3">Three</option> <option value="3">Three</option>
</select> </select>
</div> </div>
<div class="col-auto"> <div class="col-auto my-1">
<label class="custom-control custom-checkbox mb-2 mr-sm-2"> <div class="custom-control custom-checkbox mr-sm-2">
<input type="checkbox" class="custom-control-input"> <input type="checkbox" class="custom-control-input" id="customControlAutosizing">
<span class="custom-control-indicator"></span> <label class="custom-control-label" for="customControlAutosizing">Remember my preference</label>
<span class="custom-control-description">Remember my preference</span> </div>
</label>
</div> </div>
<div class="col-auto"> <div class="col-auto my-1">
<button type="submit" class="btn btn-primary mb-2">Submit</button> <button type="submit" class="btn btn-primary">Submit</button>
</div> </div>
</div> </div>
</form> </form>
@ -586,8 +579,9 @@ You may need to manually address the width and alignment of individual form cont
</div> </div>
<div class="form-check mb-2 mr-sm-2"> <div class="form-check mb-2 mr-sm-2">
<label class="form-check-label"> <input class="form-check-input" type="checkbox" id="inlineFormCheck">
<input class="form-check-input" type="checkbox"> Remember me <label class="form-check-label" for="inlineFormCheck">
Remember me
</label> </label>
</div> </div>
@ -599,21 +593,20 @@ Custom form controls and selects are also supported.
{% example html %} {% example html %}
<form class="form-inline"> <form class="form-inline">
<label class="mr-2" for="inlineFormCustomSelectPref">Preference</label> <label class="my-1 mr-2" for="inlineFormCustomSelectPref">Preference</label>
<select class="custom-select mb-2 mr-sm-2" id="inlineFormCustomSelectPref"> <select class="custom-select my-1 mr-sm-2" id="inlineFormCustomSelectPref">
<option selected>Choose...</option> <option selected>Choose...</option>
<option value="1">One</option> <option value="1">One</option>
<option value="2">Two</option> <option value="2">Two</option>
<option value="3">Three</option> <option value="3">Three</option>
</select> </select>
<label class="custom-control custom-checkbox mb-2 mr-sm-2"> <div class="custom-control custom-checkbox my-1 mr-sm-2">
<input type="checkbox" class="custom-control-input"> <input type="checkbox" class="custom-control-input" id="customControlInline">
<span class="custom-control-indicator"></span> <label class="custom-control-label" for="customControlInline">Remember my preference</label>
<span class="custom-control-description">Remember my preference</span> </div>
</label>
<button type="submit" class="btn btn-primary mb-2">Submit</button> <button type="submit" class="btn btn-primary my-1">Submit</button>
</form> </form>
{% endexample %} {% endexample %}
@ -680,8 +673,9 @@ Add the `disabled` attribute to a `<fieldset>` to disable all the controls withi
</select> </select>
</div> </div>
<div class="form-check"> <div class="form-check">
<label class="form-check-label"> <input class="form-check-input" type="checkbox" id="disabledFieldsetCheck" disabled>
<input class="form-check-input" type="checkbox"> Can't check this <label class="form-check-label" for="disabledFieldsetCheck">
Can't check this
</label> </label>
</div> </div>
<button type="submit" class="btn btn-primary">Submit</button> <button type="submit" class="btn btn-primary">Submit</button>
@ -905,23 +899,18 @@ Our example forms show native textual `<input>`s above, but form validation styl
{% example html %} {% example html %}
<form class="was-validated"> <form class="was-validated">
<label class="custom-control custom-checkbox"> <div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" required> <input type="checkbox" class="custom-control-input" id="customControlValidation1" required>
<span class="custom-control-indicator"></span> <label class="custom-control-label" for="customControlValidation1">Check this custom checkbox</label>
<span class="custom-control-description">Check this custom checkbox</span> </div>
</label>
<div class="custom-controls-stacked d-block my-3"> <div class="custom-control custom-radio">
<label class="custom-control custom-radio"> <input type="radio" class="custom-control-input" id="customControlValidation2" name="radio-stacked" required>
<input id="radioStacked1" name="radio-stacked" type="radio" class="custom-control-input" required> <label class="custom-control-label" for="customControlValidation2">Toggle this custom radio</label>
<span class="custom-control-indicator"></span> </div>
<span class="custom-control-description">Toggle this custom radio</span> <div class="custom-control custom-radio">
</label> <input type="radio" class="custom-control-input" id="customControlValidation3" name="radio-stacked" required>
<label class="custom-control custom-radio"> <label class="custom-control-label" for="customControlValidation3">Or toggle this other custom radio</label>
<input id="radioStacked2" name="radio-stacked" type="radio" class="custom-control-input" required>
<span class="custom-control-indicator"></span>
<span class="custom-control-description">Or toggle this other custom radio</span>
</label>
</div> </div>
<select class="custom-select d-block my-3" required> <select class="custom-select d-block my-3" required>
@ -944,36 +933,30 @@ For even more customization and cross browser consistency, use our completely cu
### Checkboxes and radios ### Checkboxes and radios
Each checkbox and radio is wrapped in a `<label>` for three reasons: Each checkbox and radio is wrapped in a `<div>` with a sibling `<span>` to create our custom control and a `<label>` for the accompanying text. Structurally, this is the same approach as our default `.form-check`.
- It provides a larger hit areas for checking the control. We use the sibling selector (`~`) for all our `<input>` states—like `:checked`—to properly style our custom form indicator. When combined with the `.custom-control-label` class, we can also style the text for each item based on the `<input>`'s state.
- It provides a helpful and semantic wrapper to help us replace the default `<input>`s.
- It triggers the state of the `<input>` automatically, meaning no JavaScript is required.
We hide the default `<input>` with `opacity` and use the `.custom-control-indicator` to build a new custom form indicator in its place. Unfortunately we can't build a custom one from just the `<input>` because CSS's `content` doesn't work on that element. We hide the default `<input>` with `opacity` and use the `.custom-control-label` to build a new custom form indicator in its place with `::before` and `::after`. Unfortunately we can't build a custom one from just the `<input>` because CSS's `content` doesn't work on that element.
We use the sibling selector (`~`) for all our `<input>` states—like `:checked`—to properly style our custom form indicator. When combined with the `.custom-control-description` class, we can also style the text for each item based on the `<input>`'s state.
In the checked states, we use **base64 embedded SVG icons** from [Open Iconic](https://useiconic.com/open). This provides us the best control for styling and positioning across browsers and devices. In the checked states, we use **base64 embedded SVG icons** from [Open Iconic](https://useiconic.com/open). This provides us the best control for styling and positioning across browsers and devices.
#### Checkboxes #### Checkboxes
{% example html %} {% example html %}
<label class="custom-control custom-checkbox"> <div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input"> <input type="checkbox" class="custom-control-input" id="customCheck1">
<span class="custom-control-indicator"></span> <label class="custom-control-label" for="customCheck1">Check this custom checkbox</label>
<span class="custom-control-description">Check this custom checkbox</span> </div>
</label>
{% endexample %} {% endexample %}
Custom checkboxes can also utilize the `:indeterminate` pseudo class when manually set via JavaScript (there is no available HTML attribute for specifying it). Custom checkboxes can also utilize the `:indeterminate` pseudo class when manually set via JavaScript (there is no available HTML attribute for specifying it).
<div class="bd-example bd-example-indeterminate"> <div class="bd-example bd-example-indeterminate">
<label class="custom-control custom-checkbox"> <div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input"> <input type="checkbox" class="custom-control-input" id="customCheck2">
<span class="custom-control-indicator"></span> <label class="custom-control-label" for="customCheck2">Check this custom checkbox</label>
<span class="custom-control-description">Check this custom checkbox</span> </div>
</label>
</div> </div>
If you're using jQuery, something like this should suffice: If you're using jQuery, something like this should suffice:
@ -985,16 +968,27 @@ $('.your-checkbox').prop('indeterminate', true)
#### Radios #### Radios
{% example html %} {% example html %}
<label class="custom-control custom-radio"> <div class="custom-control custom-radio">
<input id="radio1" name="radio" type="radio" class="custom-control-input"> <input type="radio" id="customRadio1" name="customRadio" class="custom-control-input">
<span class="custom-control-indicator"></span> <label class="custom-control-label" for="customRadio1">Toggle this custom radio</label>
<span class="custom-control-description">Toggle this custom radio</span> </div>
</label> <div class="custom-control custom-radio">
<label class="custom-control custom-radio"> <input type="radio" id="customRadio2" name="customRadio" class="custom-control-input">
<input id="radio2" name="radio" type="radio" class="custom-control-input"> <label class="custom-control-label" for="customRadio2">Or toggle this other custom radio</label>
<span class="custom-control-indicator"></span> </div>
<span class="custom-control-description">Or toggle this other custom radio</span> {% endexample %}
</label>
#### Inline
{% example html %}
<div class="custom-control custom-radio custom-control-inline">
<input type="radio" id="customRadioInline1" name="customRadioInline1" class="custom-control-input">
<label class="custom-control-label" for="customRadioInline1">Toggle this custom radio</label>
</div>
<div class="custom-control custom-radio custom-control-inline">
<input type="radio" id="customRadioInline2" name="customRadioInline1" class="custom-control-input">
<label class="custom-control-label" for="customRadioInline2">Or toggle this other custom radio</label>
</div>
{% endexample %} {% endexample %}
#### Disabled #### Disabled
@ -1002,35 +996,14 @@ $('.your-checkbox').prop('indeterminate', true)
Custom checkboxes and radios can also be disabled. Add the `disabled` boolean attribute to the `<input>` and the custom indicator and label description will be automatically styled. Custom checkboxes and radios can also be disabled. Add the `disabled` boolean attribute to the `<input>` and the custom indicator and label description will be automatically styled.
{% example html %} {% example html %}
<label class="custom-control custom-checkbox"> <div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" disabled> <input type="checkbox" class="custom-control-input" id="customCheckDisabled" disabled>
<span class="custom-control-indicator"></span> <label class="custom-control-label" for="customCheckDisabled">Check this custom checkbox</label>
<span class="custom-control-description">Check this custom checkbox</span> </div>
</label>
<label class="custom-control custom-radio"> <div class="custom-control custom-radio">
<input id="radio3" name="radioDisabled" type="radio" class="custom-control-input" disabled> <input type="radio" id="radio3" name="radioDisabled" id="customRadioDisabled" class="custom-control-input" disabled>
<span class="custom-control-indicator"></span> <label class="custom-control-label" for="customRadioDisabled">Toggle this custom radio</label>
<span class="custom-control-description">Toggle this custom radio</span>
</label>
{% endexample %}
#### Stacked
Custom checkboxes and radios are inline to start. Add a parent with class `.custom-controls-stacked` to ensure each form control is on separate lines.
{% example html %}
<div class="custom-controls-stacked">
<label class="custom-control custom-radio">
<input id="radioStacked3" name="radio-stacked" type="radio" class="custom-control-input">
<span class="custom-control-indicator"></span>
<span class="custom-control-description">Toggle this custom radio</span>
</label>
<label class="custom-control custom-radio">
<input id="radioStacked4" name="radio-stacked" type="radio" class="custom-control-input">
<span class="custom-control-indicator"></span>
<span class="custom-control-description">Or toggle this other custom radio</span>
</label>
</div> </div>
{% endexample %} {% endexample %}

13
docs/4.0/migration.md
View File

@ -10,10 +10,21 @@ toc: true
While Beta 2 saw the bulk of our breaking changes during the beta phase, but we still have a few that needed to be addressed in the Beta 3 release. These changes apply if you're updating to Beta 3 from Beta 2 or any older version of Bootstrap. While Beta 2 saw the bulk of our breaking changes during the beta phase, but we still have a few that needed to be addressed in the Beta 3 release. These changes apply if you're updating to Beta 3 from Beta 2 or any older version of Bootstrap.
### Miscellaneous
- Removed the unused `$thumbnail-transition` variable. We weren't transitioning anything, so it was just extra code. - Removed the unused `$thumbnail-transition` variable. We weren't transitioning anything, so it was just extra code.
- Changed the CSS for managing multiple `background-image`s on custom form checkboxes and radios. Previously, the `.custom-control-indicator` element had the background color, gradient, and SVG icon. Customizing the background gradient meant replacing all of those every time you needed to change just one. Now, we have `.custom-control-indicator` for the fill and gradient and `.custom-control-indicator::before` handles the icon.
- The npm package no longer includes any files other than our source and dist files; if you relied on them and were running our scripts via the `node_modules` folder, you should adapt your workflow. - The npm package no longer includes any files other than our source and dist files; if you relied on them and were running our scripts via the `node_modules` folder, you should adapt your workflow.
### Forms
- Rewrote both custom and default checkboxes and radios. Now, both have matching HTML structure (outer `<div>` with sibling `<input>` and `<label>`) and the same layout styles (stacked default, inline with modifier class). This allows us to style the label based on the input's state, simplifying support for the `disabled` attribute (previously requiring a parent class) and better supporting our form validation.
As part of this, we've changed the CSS for managing multiple `background-image`s on custom form checkboxes and radios. Previously, the now removed `.custom-control-indicator` element had the background color, gradient, and SVG icon. Customizing the background gradient meant replacing all of those every time you needed to change just one. Now, we have `.custom-control-label::before` for the fill and gradient and `.custom-control-label::after` handles the icon.
To make a custom check inline, add `.custom-control-inline`.
- Updated selector for input-based button groups. Instead of `[data-toggle="buttons"] { }` for style and behavior, we use the `data` attribute just for JS behaviors and rely on a new `.btn-group-toggle` class for styling. - Updated selector for input-based button groups. Instead of `[data-toggle="buttons"] { }` for style and behavior, we use the `data` attribute just for JS behaviors and rely on a new `.btn-group-toggle` class for styling.
- Removed `.col-form-legend` in favor of a slightly improved `.col-form-label`. This way `.col-form-label-sm` and `.col-form-label-lg` can be used on `<legend>` elements with ease. - Removed `.col-form-legend` in favor of a slightly improved `.col-form-label`. This way `.col-form-label-sm` and `.col-form-label-lg` can be used on `<legend>` elements with ease.
### Input groups ### Input groups

105
scss/_custom-forms.scss
View File

@ -9,9 +9,13 @@
.custom-control { .custom-control {
position: relative; position: relative;
display: inline-flex; display: block;
min-height: (1rem * $line-height-base); min-height: (1rem * $line-height-base);
padding-left: $custom-control-gutter; padding-left: $custom-control-gutter;
}
.custom-control-inline {
display: inline-flex;
margin-right: $custom-control-spacer-x; margin-right: $custom-control-spacer-x;
} }
@ -20,51 +24,61 @@
z-index: -1; // Put the input behind the label so it doesn't overlay text z-index: -1; // Put the input behind the label so it doesn't overlay text
opacity: 0; opacity: 0;
&:checked ~ .custom-control-indicator { &:checked ~ .custom-control-label::before {
color: $custom-control-indicator-checked-color; color: $custom-control-indicator-checked-color;
@include gradient-bg($custom-control-indicator-checked-bg); @include gradient-bg($custom-control-indicator-checked-bg);
@include box-shadow($custom-control-indicator-checked-box-shadow); @include box-shadow($custom-control-indicator-checked-box-shadow);
} }
&:focus ~ .custom-control-indicator { &:focus ~ .custom-control-label::before {
// the mixin is not used here to make sure there is feedback // the mixin is not used here to make sure there is feedback
box-shadow: $custom-control-indicator-focus-box-shadow; box-shadow: $custom-control-indicator-focus-box-shadow;
} }
&:active ~ .custom-control-indicator { &:active ~ .custom-control-label::before {
color: $custom-control-indicator-active-color; color: $custom-control-indicator-active-color;
background-color: $custom-control-indicator-active-bg; background-color: $custom-control-indicator-active-bg;
@include box-shadow($custom-control-indicator-active-box-shadow); @include box-shadow($custom-control-indicator-active-box-shadow);
} }
&:disabled { &:disabled {
~ .custom-control-indicator { ~ .custom-control-label {
background-color: $custom-control-indicator-disabled-bg; color: $custom-control-label-disabled-color;
}
~ .custom-control-description { &::before {
color: $custom-control-description-disabled-color; background-color: $custom-control-indicator-disabled-bg;
}
} }
} }
} }
// Custom indicator // Custom control indicators
// //
// Generates a shadow element to create our makeshift checkbox/radio background. // Build the custom controls out of psuedo-elements.
.custom-control-indicator { .custom-control-label {
position: absolute; margin-bottom: 0;
top: (($line-height-base - $custom-control-indicator-size) / 2);
left: 0;
display: block;
width: $custom-control-indicator-size;
height: $custom-control-indicator-size;
pointer-events: none;
user-select: none;
background-color: $custom-control-indicator-bg;
@include box-shadow($custom-control-indicator-box-shadow);
// Background-color and (when enabled) gradient
&::before { &::before {
position: absolute;
top: (($line-height-base - $custom-control-indicator-size) / 2);
left: 0;
display: block;
width: $custom-control-indicator-size;
height: $custom-control-indicator-size;
pointer-events: none;
content: "";
user-select: none;
background-color: $custom-control-indicator-bg;
@include box-shadow($custom-control-indicator-box-shadow);
}
// Foreground (icon)
&::after {
position: absolute;
top: (($line-height-base - $custom-control-indicator-size) / 2);
left: 0;
display: block; display: block;
width: $custom-control-indicator-size; width: $custom-control-indicator-size;
height: $custom-control-indicator-size; height: $custom-control-indicator-size;
@ -75,28 +89,31 @@
} }
} }
// Checkboxes // Checkboxes
// //
// Tweak just a few things for checkboxes. // Tweak just a few things for checkboxes.
.custom-checkbox { .custom-checkbox {
.custom-control-indicator { .custom-control-label::before {
@include border-radius($custom-checkbox-indicator-border-radius); @include border-radius($custom-checkbox-indicator-border-radius);
} }
.custom-control-input:checked ~ .custom-control-indicator { .custom-control-input:checked ~ .custom-control-label {
@include gradient-bg($custom-control-indicator-checked-bg);
&::before { &::before {
@include gradient-bg($custom-control-indicator-checked-bg);
}
&::after {
background-image: $custom-checkbox-indicator-icon-checked; background-image: $custom-checkbox-indicator-icon-checked;
} }
} }
.custom-control-input:indeterminate ~ .custom-control-indicator { .custom-control-input:indeterminate ~ .custom-control-label {
@include gradient-bg($custom-checkbox-indicator-indeterminate-bg);
@include box-shadow($custom-checkbox-indicator-indeterminate-box-shadow);
&::before { &::before {
@include gradient-bg($custom-checkbox-indicator-indeterminate-bg);
@include box-shadow($custom-checkbox-indicator-indeterminate-box-shadow);
}
&::after {
background-image: $custom-checkbox-indicator-icon-indeterminate; background-image: $custom-checkbox-indicator-icon-indeterminate;
} }
} }
@ -107,34 +124,16 @@
// Tweak just a few things for radios. // Tweak just a few things for radios.
.custom-radio { .custom-radio {
.custom-control-indicator { .custom-control-label::before {
border-radius: $custom-radio-indicator-border-radius; border-radius: $custom-radio-indicator-border-radius;
} }
.custom-control-input:checked ~ .custom-control-indicator { .custom-control-input:checked ~ .custom-control-label {
@include gradient-bg($custom-control-indicator-checked-bg);
&::before { &::before {
background-image: $custom-radio-indicator-icon-checked; @include gradient-bg($custom-control-indicator-checked-bg);
} }
} &::after {
} background-image: $custom-radio-indicator-icon-checked;
// Layout options
//
// By default radios and checkboxes are `inline-block` with no additional spacing
// set. Use these optional classes to tweak the layout.
.custom-controls-stacked {
display: flex;
flex-direction: column;
.custom-control {
margin-bottom: $custom-control-spacer-y;
+ .custom-control {
margin-left: 0;
} }
} }
} }

51
scss/_forms.scss
View File

@ -207,33 +207,35 @@ select.form-control-lg {
.form-check { .form-check {
position: relative; position: relative;
display: block; display: block;
margin-bottom: $form-check-margin-bottom;
&.disabled {
.form-check-label {
color: $text-muted;
}
}
}
.form-check-label {
padding-left: $form-check-input-gutter; padding-left: $form-check-input-gutter;
margin-bottom: 0; // Override default `<label>` bottom margin
} }
.form-check-input { .form-check-input {
position: absolute; position: absolute;
margin-top: $form-check-input-margin-y; margin-top: $form-check-input-margin-y;
margin-left: -$form-check-input-gutter; margin-left: -$form-check-input-gutter;
&:disabled ~ .form-check-label {
color: $text-muted;
}
}
.form-check-label {
margin-bottom: 0; // Override default `<label>` bottom margin
} }
// Radios and checkboxes on same line
.form-check-inline { .form-check-inline {
display: inline-block; display: inline-flex;
align-items: center;
padding-left: 0; // Override base .form-check
margin-right: $form-check-inline-margin-x; margin-right: $form-check-inline-margin-x;
.form-check-label { // Undo .form-check-input defaults and add some `margin-right`.
vertical-align: middle; .form-check-input {
position: static;
margin-top: 0;
margin-right: $form-check-inline-input-margin-x;
margin-left: 0;
} }
} }
@ -310,10 +312,6 @@ select.form-control-lg {
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: auto; width: auto;
margin-top: 0;
margin-bottom: 0;
}
.form-check-label {
padding-left: 0; padding-left: 0;
} }
.form-check-input { .form-check-input {
@ -323,23 +321,12 @@ select.form-control-lg {
margin-left: 0; margin-left: 0;
} }
// Custom form controls
.custom-control { .custom-control {
display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
padding-left: 0;
} }
.custom-control-indicator { .custom-control-label {
position: static; margin-bottom: 0;
display: inline-block;
margin-right: $form-check-input-margin-x; // Flexbox alignment means we lose our HTML space here, so we compensate.
vertical-align: text-bottom;
}
// Re-override the feedback icon.
.has-feedback .form-control-feedback {
top: 0;
} }
} }
} }

7
scss/_variables.scss
View File

@ -423,12 +423,12 @@ $input-transition: border-color .15s ease-in-out, box-shado
$form-text-margin-top: .25rem !default; $form-text-margin-top: .25rem !default;
$form-check-margin-bottom: .5rem !default;
$form-check-input-gutter: 1.25rem !default; $form-check-input-gutter: 1.25rem !default;
$form-check-input-margin-y: .25rem !default; $form-check-input-margin-y: .3rem !default;
$form-check-input-margin-x: .25rem !default; $form-check-input-margin-x: .25rem !default;
$form-check-inline-margin-x: .75rem !default; $form-check-inline-margin-x: .75rem !default;
$form-check-inline-input-margin-x: .3125rem !default;
$form-group-margin-bottom: 1rem !default; $form-group-margin-bottom: 1rem !default;
@ -437,7 +437,6 @@ $input-group-addon-bg: $gray-200 !default;
$input-group-addon-border-color: $input-border-color !default; $input-group-addon-border-color: $input-border-color !default;
$custom-control-gutter: 1.5rem !default; $custom-control-gutter: 1.5rem !default;
$custom-control-spacer-y: .25rem !default;
$custom-control-spacer-x: 1rem !default; $custom-control-spacer-x: 1rem !default;
$custom-control-indicator-size: 1rem !default; $custom-control-indicator-size: 1rem !default;
@ -446,7 +445,7 @@ $custom-control-indicator-bg-size: 50% 50% !default;
$custom-control-indicator-box-shadow: inset 0 .25rem .25rem rgba($black, .1) !default; $custom-control-indicator-box-shadow: inset 0 .25rem .25rem rgba($black, .1) !default;
$custom-control-indicator-disabled-bg: $gray-200 !default; $custom-control-indicator-disabled-bg: $gray-200 !default;
$custom-control-description-disabled-color: $gray-600 !default; $custom-control-label-disabled-color: $gray-600 !default;
$custom-control-indicator-checked-color: $white !default; $custom-control-indicator-checked-color: $white !default;
$custom-control-indicator-checked-bg: theme-color("primary") !default; $custom-control-indicator-checked-bg: theme-color("primary") !default;

18
scss/mixins/_forms.scss
View File

@ -69,34 +69,32 @@
} }
} }
// TODO: redo check markup lol crap
.form-check-input { .form-check-input {
.was-validated &:#{$state}, .was-validated &:#{$state},
&.is-#{$state} { &.is-#{$state} {
+ .form-check-label { ~ .form-check-label {
color: $color; color: $color;
} }
} }
} }
// custom radios and checks
.custom-control-input { .custom-control-input {
.was-validated &:#{$state}, .was-validated &:#{$state},
&.is-#{$state} { &.is-#{$state} {
~ .custom-control-indicator { ~ .custom-control-label {
background-color: lighten($color, 25%);
}
~ .custom-control-description {
color: $color; color: $color;
&::before {
background-color: lighten($color, 25%);
}
} }
&:checked { &:checked {
~ .custom-control-indicator { ~ .custom-control-label::before {
@include gradient-bg(lighten($color, 10%)); @include gradient-bg(lighten($color, 10%));
} }
} }
&:focus { &:focus {
~ .custom-control-indicator { ~ .custom-control-label::before {
box-shadow: 0 0 0 1px $body-bg, 0 0 0 $input-focus-width rgba($color, .25); box-shadow: 0 0 0 1px $body-bg, 0 0 0 $input-focus-width rgba($color, .25);
} }
} }