From: Mark Otto Date: Thu, 18 Jun 2026 03:54:48 +0000 (-0700) Subject: V6 more form fixes (#42523) X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=abf965cd96ebdea497b5d6ff6449d044ee05a1cf;p=thirdparty%2Fbootstrap.git V6 more form fixes (#42523) * fix switch disabled checked * fix selector for select bg * fix radio disabled * match disabled demos * autocomplete off for date inputs * fix floating label custom height * fix disabled --- diff --git a/scss/forms/_floating-labels.scss b/scss/forms/_floating-labels.scss index 8a751960b6..1c15be2b3c 100644 --- a/scss/forms/_floating-labels.scss +++ b/scss/forms/_floating-labels.scss @@ -16,6 +16,11 @@ $form-floating-tokens: defaults( --form-floating-input-padding-t: 1.625rem, --form-floating-input-padding-b: .625rem, --form-floating-label-height: 1.5em, + // Backgrounds for the textarea label's masking pseudo-element. Mirrors + // `.form-control` here because the label is a sibling of the control, so it + // can't inherit the control's own `--control-bg`/`--control-disabled-bg`. + --form-floating-label-bg: var(--btn-input-bg), + --form-floating-label-disabled-bg: var(--bg-2), --form-floating-label-opacity: .65, --form-floating-label-transform: scale(.85) translateY(-.5rem) translateX(.15rem), --form-floating-label-disabled-color: var(--fg-3), @@ -54,6 +59,11 @@ $form-floating-tokens: defaults( @include transition(var(--form-floating-transition)); } + // Anchor the label to the top for textareas so it floats correctly at any height + > textarea ~ label { + align-items: flex-start; + } + > .form-control, > .form-control-plaintext { height: var(--form-floating-height); @@ -99,12 +109,12 @@ $form-floating-tokens: defaults( z-index: -1; height: var(--form-floating-label-height); content: ""; - background-color: var(--control-bg); + background-color: var(--form-floating-label-bg); @include border-radius(var(--btn-input-border-radius)); } } > textarea:disabled ~ label::after { - background-color: var(--control-disabled-bg); + background-color: var(--form-floating-label-disabled-bg); } > .form-control-plaintext { diff --git a/scss/forms/_form-control.scss b/scss/forms/_form-control.scss index 9ae6ab9bf8..cd01f82954 100644 --- a/scss/forms/_form-control.scss +++ b/scss/forms/_form-control.scss @@ -204,7 +204,7 @@ $form-control-sizes: defaults( } } - @media (prefers-color-scheme: dark) { + [data-bs-theme="dark"] { select.form-control, .form-control-caret { background-image: var(--control-select-bg-dark); diff --git a/scss/forms/_radio.scss b/scss/forms/_radio.scss index 82d4efe3e1..71dd811c85 100644 --- a/scss/forms/_radio.scss +++ b/scss/forms/_radio.scss @@ -61,6 +61,9 @@ $radio-tokens: defaults( cursor: default; } } + &:disabled:checked { + opacity: var(--radio-disabled-opacity); + } &:focus-visible { @include focus-ring(true); diff --git a/scss/forms/_switch.scss b/scss/forms/_switch.scss index de992a25e8..2357b74423 100644 --- a/scss/forms/_switch.scss +++ b/scss/forms/_switch.scss @@ -75,6 +75,18 @@ $switch-tokens: defaults( @include focus-ring(true); } + &:has(input:disabled:not(:checked)) { + --switch-bg: var(--switch-disabled-bg); + --switch-indicator-bg: var(--switch-disabled-indicator-bg); + + &::before { opacity: .4; } + + ~ label { + color: var(--fg-3); + cursor: default; + } + } + &:has(input:checked) { background-color: var(--theme-bg, var(--switch-checked-bg)); border-color: var(--theme-bg, var(--switch-checked-border-color)); @@ -84,14 +96,11 @@ $switch-tokens: defaults( } } - &:has(input:disabled) { - --switch-bg: var(--switch-disabled-bg); - --switch-indicator-bg: var(--switch-disabled-indicator-bg); - - &::before { opacity: .4; } + &:has(input:checked:disabled) { + opacity: .65; ~ label { - color: var(--secondary-fg); + color: var(--fg-3); cursor: default; } } diff --git a/site/src/content/docs/forms/checkbox.mdx b/site/src/content/docs/forms/checkbox.mdx index e9b3c7718d..85062ef4f4 100644 --- a/site/src/content/docs/forms/checkbox.mdx +++ b/site/src/content/docs/forms/checkbox.mdx @@ -61,14 +61,12 @@ Modify the appearance of checked checkboxes by adding the `.theme-{color}` class Add the `disabled` attribute and the associated ` - `} /> + `} /> Note that we’re using a width utility of `.w-12` to ensure the input is wide enough to accommodate the date format and imply some affordance for the expected type of input. @@ -35,7 +35,7 @@ Use the [form field]([[docsref:/forms/field]]) component to layout and wrap your - +
We’ll never share your email with anyone else.
@@ -50,7 +50,7 @@ Use the [form adorn component]([[docsref:/forms/form-adorn]]) to add a calendar
- + `} /> ### Min & Max dates @@ -58,35 +58,35 @@ Use the [form adorn component]([[docsref:/forms/form-adorn]]) to add a calendar Restrict the selectable date range using `data-bs-date-min` and `data-bs-date-max`. Event date (2026 only) - `} /> + `} /> ### Multiple dates Enable multiple date selection with `data-bs-selection-mode="multiple"`. Select multiple dates - `} /> + `} /> ### Multiple months Display multiple months side-by-side with the `displayMonthsCount` option. This is useful for date range selection where users need to see more context. Select date range - `} /> + `} /> ### Date range Select a range of dates with `data-bs-selection-mode="multiple-ranged"`. Use `data-bs-selected-dates` to preselect a date range. Select date range - `} /> + `} /> ### Multi-month date range For selecting date ranges that span multiple months, combine `data-bs-selection-mode="multiple-ranged"` with `data-bs-display-months-count="2"` to show two months side-by-side, making it easier for users to select across month boundaries. Select date range - `} /> + `} /> ## Options @@ -95,7 +95,7 @@ For selecting date ranges that span multiple months, combine `data-bs-selection- Set the first day of the week (0 = Sunday, 1 = Monday, etc.) with `data-bs-first-weekday`. Week starts on Sunday - `} /> + `} /> ### Placement @@ -104,15 +104,15 @@ Control where the calendar appears relative to the input with `data-bs-placement
- +
- +
- +
`} /> @@ -194,7 +194,7 @@ When a parent element has a theme, both the input and calendar popup inherit it: - + `} /> ### Datepicker-only theme @@ -202,7 +202,7 @@ When a parent element has a theme, both the input and calendar popup inherit it: Use `data-bs-datepicker-theme` to set the datepicker popup’s theme independently of the input. This is useful when you want a light input with a dark datepicker, or vice versa: Light input, dark datepicker -`} /> +`} /> ## CSS diff --git a/site/src/content/docs/forms/floating-labels.mdx b/site/src/content/docs/forms/floating-labels.mdx index 5cf8615a11..36d780d281 100644 --- a/site/src/content/docs/forms/floating-labels.mdx +++ b/site/src/content/docs/forms/floating-labels.mdx @@ -45,10 +45,10 @@ By default, ` + + `} /> @@ -78,8 +78,8 @@ Add the `disabled` boolean attribute on an input, a textarea or a select to give -
- +
+
diff --git a/site/src/content/docs/forms/radio.mdx b/site/src/content/docs/forms/radio.mdx index d476186d82..375f74d159 100644 --- a/site/src/content/docs/forms/radio.mdx +++ b/site/src/content/docs/forms/radio.mdx @@ -48,11 +48,15 @@ Modify the appearance of checked radios by adding the `.theme-{color}` class to Add the `disabled` attribute and the associated `
- `} /> + +
+ + +
`} /> ## Sizes diff --git a/site/src/content/docs/forms/switch.mdx b/site/src/content/docs/forms/switch.mdx index 17f41e8350..7ab2306d1d 100644 --- a/site/src/content/docs/forms/switch.mdx +++ b/site/src/content/docs/forms/switch.mdx @@ -41,11 +41,18 @@ Modify the appearance of switches by adding the `.theme-{color}` class to the `. Add the `disabled` attribute and the associated `
+ +
+
+ +
+
`} /> ## Sizes