diff options
Diffstat (limited to '')
-rw-r--r-- | site/content/docs/5.3/forms/checks-radios.md (renamed from site/content/docs/5.2/forms/checks-radios.md) | 12 | ||||
-rw-r--r-- | site/content/docs/5.3/forms/floating-labels.md (renamed from site/content/docs/5.2/forms/floating-labels.md) | 32 | ||||
-rw-r--r-- | site/content/docs/5.3/forms/form-control.md (renamed from site/content/docs/5.2/forms/form-control.md) | 42 | ||||
-rw-r--r-- | site/content/docs/5.3/forms/input-group.md (renamed from site/content/docs/5.2/forms/input-group.md) | 15 | ||||
-rw-r--r-- | site/content/docs/5.3/forms/layout.md (renamed from site/content/docs/5.2/forms/layout.md) | 0 | ||||
-rw-r--r-- | site/content/docs/5.3/forms/overview.md (renamed from site/content/docs/5.2/forms/overview.md) | 44 | ||||
-rw-r--r-- | site/content/docs/5.3/forms/range.md (renamed from site/content/docs/5.2/forms/range.md) | 4 | ||||
-rw-r--r-- | site/content/docs/5.3/forms/select.md (renamed from site/content/docs/5.2/forms/select.md) | 4 | ||||
-rw-r--r-- | site/content/docs/5.3/forms/validation.md (renamed from site/content/docs/5.2/forms/validation.md) | 32 |
9 files changed, 118 insertions, 67 deletions
diff --git a/site/content/docs/5.2/forms/checks-radios.md b/site/content/docs/5.3/forms/checks-radios.md index 12f8b00..13a5091 100644 --- a/site/content/docs/5.2/forms/checks-radios.md +++ b/site/content/docs/5.3/forms/checks-radios.md @@ -3,7 +3,7 @@ layout: docs title: Checks and radios description: Create consistent cross-browser and cross-device checkboxes and radios with our completely rewritten checks component. group: forms -aliases: "/docs/5.2/forms/checks/" +aliases: "/docs/5.3/forms/checks/" toc: true --- @@ -300,8 +300,14 @@ Different variants of `.btn`, such at the various outlined styles, are supported <label class="btn btn-outline-danger" for="danger-outlined">Danger radio</label> {{< /example >}} -## Sass +## CSS -### Variables +### Sass variables + +Variables for checks: {{< scss-docs name="form-check-variables" file="scss/_variables.scss" >}} + +Variables for switches: + +{{< scss-docs name="form-switch-variables" file="scss/_variables.scss" >}} diff --git a/site/content/docs/5.2/forms/floating-labels.md b/site/content/docs/5.3/forms/floating-labels.md index 9ec4fcd..a65a857 100644 --- a/site/content/docs/5.2/forms/floating-labels.md +++ b/site/content/docs/5.3/forms/floating-labels.md @@ -75,6 +75,34 @@ Other than `.form-control`, floating labels are only available on `.form-select` </div> {{< /example >}} +## Disabled + +Add the `disabled` boolean attribute on an input, a textarea or a select to give it a grayed out appearance, remove pointer events, and prevent focusing. + +{{< example >}} +<div class="form-floating mb-3"> + <input type="email" class="form-control" id="floatingInputDisabled" placeholder="name@example.com" disabled> + <label for="floatingInputDisabled">Email address</label> +</div> +<div class="form-floating mb-3"> + <textarea class="form-control" placeholder="Leave a comment here" id="floatingTextareaDisabled" disabled></textarea> + <label for="floatingTextareaDisabled">Comments</label> +</div> +<div class="form-floating mb-3"> + <textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea2Disabled" style="height: 100px" disabled></textarea> + <label for="floatingTextarea2Disabled">Comments</label> +</div> +<div class="form-floating"> + <select class="form-select" id="floatingSelectDisabled" aria-label="Floating label disabled select example" disabled> + <option selected>Open this select menu</option> + <option value="1">One</option> + <option value="2">Two</option> + <option value="3">Three</option> + </select> + <label for="floatingSelectDisabled">Works with selects</label> +</div> +{{< /example >}} + ## Readonly plaintext Floating labels also support `.form-control-plaintext`, which can be helpful for toggling from an editable `<input>` to a plaintext value without affecting the page layout. @@ -145,8 +173,8 @@ When working with the Bootstrap grid system, be sure to place form elements with </div> {{< /example >}} -## Sass +## CSS -### Variables +### Sass variables {{< scss-docs name="form-floating-variables" file="scss/_variables.scss" >}} diff --git a/site/content/docs/5.2/forms/form-control.md b/site/content/docs/5.3/forms/form-control.md index 4d6972d..0c6b599 100644 --- a/site/content/docs/5.2/forms/form-control.md +++ b/site/content/docs/5.3/forms/form-control.md @@ -8,6 +8,8 @@ toc: true ## Example +Form controls are styled with a mix of Sass and CSS variables, allowing them to adapt to color modes and support any customization method. + {{< example >}} <div class="mb-3"> <label for="exampleFormControlInput1" class="form-label">Email address</label> @@ -29,6 +31,42 @@ Set heights using classes like `.form-control-lg` and `.form-control-sm`. <input class="form-control form-control-sm" type="text" placeholder=".form-control-sm" aria-label=".form-control-sm example"> {{< /example >}} +## Form text + +Block-level or inline-level form text can be created using `.form-text`. + +{{< callout warning >}} +Form text should be explicitly associated with the form control it relates to using the `aria-labelledby` (for mandatory information such as data format) or `aria-describedby` (for complementary information) attribute. This will ensure that assistive technologies—such as screen readers—will announce this form text when the user focuses or enters the control. +{{< /callout >}} + +Form text below inputs can be styled with `.form-text`. If a block-level element will be used, a top margin is added for easy spacing from the inputs above. + +{{< example >}} +<label for="inputPassword5" class="form-label">Password</label> +<input type="password" id="inputPassword5" class="form-control" aria-labelledby="passwordHelpBlock"> +<div id="passwordHelpBlock" class="form-text"> + Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji. +</div> +{{< /example >}} + +Inline text can use any typical inline HTML element (be it a `<span>`, `<small>`, or something else) with nothing more than the `.form-text` class. + +{{< example >}} +<div class="row g-3 align-items-center"> + <div class="col-auto"> + <label for="inputPassword6" class="col-form-label">Password</label> + </div> + <div class="col-auto"> + <input type="password" id="inputPassword6" class="form-control" aria-labelledby="passwordHelpInline"> + </div> + <div class="col-auto"> + <span id="passwordHelpInline" class="form-text"> + Must be 8-20 characters long. + </span> + </div> +</div> +{{< /example >}} + ## Disabled Add the `disabled` boolean attribute on an input to give it a grayed out appearance, remove pointer events, and prevent focusing. @@ -133,9 +171,9 @@ Learn more about [support for datalist elements](https://caniuse.com/datalist). </datalist> {{< /example >}} -## Sass +## CSS -### Variables +### Sass variables `$input-*` are shared across most of our form controls (and not buttons). diff --git a/site/content/docs/5.2/forms/input-group.md b/site/content/docs/5.3/forms/input-group.md index 00e9eee..d984a48 100644 --- a/site/content/docs/5.2/forms/input-group.md +++ b/site/content/docs/5.3/forms/input-group.md @@ -21,10 +21,13 @@ Place one add-on or button on either side of an input. You may also place one on <span class="input-group-text" id="basic-addon2">@example.com</span> </div> -<label for="basic-url" class="form-label">Your vanity URL</label> -<div class="input-group mb-3"> - <span class="input-group-text" id="basic-addon3">https://example.com/users/</span> - <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3"> +<div class="mb-3"> + <label for="basic-url" class="form-label">Your vanity URL</label> + <div class="input-group"> + <span class="input-group-text" id="basic-addon3">https://example.com/users/</span> + <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3 basic-addon4"> + </div> + <div class="form-text" id="basic-addon4">Example help text goes outside the input group.</div> </div> <div class="input-group mb-3"> @@ -309,8 +312,8 @@ Input groups include support for custom selects and custom file inputs. Browser </div> {{< /example >}} -## Sass +## CSS -### Variables +### Sass variables {{< scss-docs name="input-group-variables" file="scss/_variables.scss" >}} diff --git a/site/content/docs/5.2/forms/layout.md b/site/content/docs/5.3/forms/layout.md index 3b27e3f..3b27e3f 100644 --- a/site/content/docs/5.2/forms/layout.md +++ b/site/content/docs/5.3/forms/layout.md diff --git a/site/content/docs/5.2/forms/overview.md b/site/content/docs/5.3/forms/overview.md index f38ad90..f4d2f63 100644 --- a/site/content/docs/5.2/forms/overview.md +++ b/site/content/docs/5.3/forms/overview.md @@ -4,7 +4,7 @@ title: Forms description: Examples and usage guidelines for form control styles, layout options, and custom components for creating a wide variety of forms. group: forms toc: true -aliases: "/docs/5.2/forms/" +aliases: "/docs/5.3/forms/" sections: - title: Form control description: Style textual inputs and textareas with support for multiple states. @@ -51,44 +51,6 @@ Here's a quick example to demonstrate Bootstrap's form styles. Keep reading for </form> {{< /example >}} -## Form text - -Block-level or inline-level form text can be created using `.form-text`. - -{{< callout warning >}} -##### Associating form text with form controls - -Form text should be explicitly associated with the form control it relates to using the `aria-describedby` attribute. This will ensure that assistive technologies—such as screen readers—will announce this form text when the user focuses or enters the control. -{{< /callout >}} - -Form text below inputs can be styled with `.form-text`. If a block-level element will be used, a top margin is added for easy spacing from the inputs above. - -{{< example >}} -<label for="inputPassword5" class="form-label">Password</label> -<input type="password" id="inputPassword5" class="form-control" aria-describedby="passwordHelpBlock"> -<div id="passwordHelpBlock" class="form-text"> - Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji. -</div> -{{< /example >}} - -Inline text can use any typical inline HTML element (be it a `<span>`, `<small>`, or something else) with nothing more than the `.form-text` class. - -{{< example >}} -<div class="row g-3 align-items-center"> - <div class="col-auto"> - <label for="inputPassword6" class="col-form-label">Password</label> - </div> - <div class="col-auto"> - <input type="password" id="inputPassword6" class="form-control" aria-describedby="passwordHelpInline"> - </div> - <div class="col-auto"> - <span id="passwordHelpInline" class="form-text"> - Must be 8-20 characters long. - </span> - </div> -</div> -{{< /example >}} - ## Disabled forms Add the `disabled` boolean attribute on an input to prevent user interactions and make it appear lighter. @@ -143,11 +105,11 @@ If none of these are present, assistive technologies may resort to using the `pl While using visually hidden content (`.visually-hidden`, `aria-label`, and even `placeholder` content, which disappears once a form field has content) will benefit assistive technology users, a lack of visible label text may still be problematic for certain users. Some form of visible label is generally the best approach, both for accessibility and usability. -## Sass +## CSS Many form variables are set at a general level to be re-used and extended by individual form components. You'll see these most often as `$input-btn-*` and `$input-*` variables. -### Variables +### Sass variables `$input-btn-*` variables are shared global variables between our [buttons]({{< docsref "/components/buttons" >}}) and our form components. You'll find these frequently reassigned as values to other component-specific variables. diff --git a/site/content/docs/5.2/forms/range.md b/site/content/docs/5.3/forms/range.md index 5c4f026..31edb0a 100644 --- a/site/content/docs/5.2/forms/range.md +++ b/site/content/docs/5.3/forms/range.md @@ -42,8 +42,8 @@ By default, range inputs "snap" to integer values. To change this, you can speci <input type="range" class="form-range" min="0" max="5" step="0.5" id="customRange3"> {{< /example >}} -## Sass +## CSS -### Variables +### Sass variables {{< scss-docs name="form-range-variables" file="scss/_variables.scss" >}} diff --git a/site/content/docs/5.2/forms/select.md b/site/content/docs/5.3/forms/select.md index 7f0c255..07ee8c8 100644 --- a/site/content/docs/5.2/forms/select.md +++ b/site/content/docs/5.3/forms/select.md @@ -74,8 +74,8 @@ Add the `disabled` boolean attribute on a select to give it a grayed out appeara </select> {{< /example >}} -## Sass +## CSS -### Variables +### Sass variables {{< scss-docs name="form-select-variables" file="scss/_variables.scss" >}} diff --git a/site/content/docs/5.2/forms/validation.md b/site/content/docs/5.3/forms/validation.md index d6d6266..c66bbaf 100644 --- a/site/content/docs/5.2/forms/validation.md +++ b/site/content/docs/5.3/forms/validation.md @@ -5,7 +5,7 @@ description: Provide valuable, actionable feedback to your users with HTML5 form group: forms toc: true extra_js: - - src: "/docs/5.2/assets/js/validate-forms.js" + - src: "/docs/5.3/assets/js/validate-forms.js" async: true --- @@ -19,7 +19,7 @@ Here's how form validation works with Bootstrap: - HTML form validation is applied via CSS's two pseudo-classes, `:invalid` and `:valid`. It applies to `<input>`, `<select>`, and `<textarea>` elements. - Bootstrap scopes the `:invalid` and `:valid` styles to parent `.was-validated` class, usually applied to the `<form>`. Otherwise, any required field without a value shows up as invalid on page load. This way, you may choose when to activate them (typically after form submission is attempted). -- To reset the appearance of the form (for instance, in the case of dynamic form submissions using AJAX), remove the `.was-validated` class from the `<form>` again after submission. +- To reset the appearance of the form (for instance, in the case of dynamic form submissions using Ajax), remove the `.was-validated` class from the `<form>` again after submission. - As a fallback, `.is-invalid` and `.is-valid` classes may be used instead of the pseudo-classes for [server-side validation](#server-side). They do not require a `.was-validated` parent class. - Due to constraints in how CSS works, we cannot (at present) apply styles to a `<label>` that comes before a form control in the DOM without the help of custom JavaScript. - All modern browsers support the [constraint validation API](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#the-constraint-validation-api), a series of JavaScript methods for validating form controls. @@ -127,7 +127,7 @@ While these feedback styles cannot be styled with CSS, you can still customize t <label for="validationDefaultUsername" class="form-label">Username</label> <div class="input-group"> <span class="input-group-text" id="inputGroupPrepend2">@</span> - <input type="text" class="form-control" id="validationDefaultUsername" aria-describedby="inputGroupPrepend2" required> + <input type="text" class="form-control" id="validationDefaultUsername" aria-describedby="inputGroupPrepend2" required> </div> </div> <div class="col-md-6"> @@ -159,7 +159,7 @@ While these feedback styles cannot be styled with CSS, you can still customize t </form> {{< /example >}} -## Server side +## Server-side We recommend using client-side validation, but in case you require server-side validation, you can indicate invalid and valid form fields with `.is-invalid` and `.is-valid`. Note that `.invalid-feedback` is also supported with these classes. @@ -349,19 +349,33 @@ If your form layout allows it, you can swap the `.{valid|invalid}-feedback` clas </form> {{< /example >}} -## Sass +## CSS ### Variables +{{< added-in "5.3.0" >}} + +As part of Bootstrap's evolving CSS variables approach, forms now use local CSS variables for validation for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too. + +{{< scss-docs name="root-form-validation-variables" file="scss/_root.scss" >}} + +These variables are also color mode adaptive, meaning they change color while in dark mode. + +### Sass variables + {{< scss-docs name="form-feedback-variables" file="scss/_variables.scss" >}} -### Mixins +{{< scss-docs name="form-validation-colors" file="scss/_variables.scss" >}} + +{{< scss-docs name="form-validation-colors-dark" file="scss/_variables-dark.scss" >}} + +### Sass mixins -Two mixins are combined together, through our [loop](#loop), to generate our form validation feedback styles. +Two mixins are combined, through our [loop](#sass-loops), to generate our form validation feedback styles. {{< scss-docs name="form-validation-mixins" file="scss/mixins/_forms.scss" >}} -### Map +### Sass maps This is the validation Sass map from `_variables.scss`. Override or extend this to generate different or additional states. @@ -369,7 +383,7 @@ This is the validation Sass map from `_variables.scss`. Override or extend this Maps of `$form-validation-states` can contain three optional parameters to override tooltips and focus styles. -### Loop +### Sass loops Used to iterate over `$form-validation-states` map values to generate our validation styles. Any modifications to the above Sass map will be reflected in your compiled CSS via this loop. |