mirror of
https://github.com/twbs/bootstrap.git
synced 2025-08-26 23:04:32 +02:00
Remove checkbox/radio toggle from button plugin in favor of a CSS only solution
This commit is contained in:
Martijn Cuppens
committed by
Mark Otto
Mark Otto
parent
1b2ea5efb1
commit
1a0a0858ef
@@ -1,14 +1,14 @@
|
||||
---
|
||||
layout: docs
|
||||
title: Button group
|
||||
description: Group a series of buttons together on a single line with the button group, and super-power them with JavaScript.
|
||||
description: Group a series of buttons together on a single line with the button group.
|
||||
group: components
|
||||
toc: true
|
||||
---
|
||||
|
||||
## Basic example
|
||||
|
||||
Wrap a series of buttons with `.btn` in `.btn-group`. Add on optional JavaScript radio and checkbox style behavior with [our buttons plugin]({{< docsref "/components/buttons#button-plugin" >}}).
|
||||
Wrap a series of buttons with `.btn` in `.btn-group`.
|
||||
|
||||
{{< example >}}
|
||||
<div class="btn-group" role="group" aria-label="Basic example">
|
||||
@@ -26,6 +26,26 @@ In order for assistive technologies (such as screen readers) to convey that a se
|
||||
In addition, groups and toolbars should be given an explicit label, as most assistive technologies will otherwise not announce them, despite the presence of the correct role attribute. In the examples provided here, we use `aria-label`, but alternatives such as `aria-labelledby` can also be used.
|
||||
{{< /callout >}}
|
||||
|
||||
These classes can also be added to links. Use the `.active` class to highlight a link.
|
||||
|
||||
{{< example >}}
|
||||
<div class="btn-group">
|
||||
<a href="#" class="btn btn-secondary active">Active link</a>
|
||||
<a href="#" class="btn btn-secondary">Link</a>
|
||||
<a href="#" class="btn btn-secondary">Link</a>
|
||||
</div>
|
||||
{{< /example >}}
|
||||
|
||||
## Outlined styles
|
||||
|
||||
{{< example >}}
|
||||
<div class="btn-group" role="group" aria-label="Basic example">
|
||||
<button type="button" class="btn btn-outline-secondary">Left</button>
|
||||
<button type="button" class="btn btn-outline-secondary">Middle</button>
|
||||
<button type="button" class="btn btn-outline-secondary">Right</button>
|
||||
</div>
|
||||
{{< /example >}}
|
||||
|
||||
## Button toolbar
|
||||
|
||||
Combine sets of button groups into button toolbars for more complex components. Use utility classes as needed to space out groups, buttons, and more.
|
||||
|
||||
@@ -75,15 +75,6 @@ Create block level buttons—those that span the full width of a parent—by add
|
||||
<button type="button" class="btn btn-secondary btn-lg btn-block">Block level button</button>
|
||||
{{< /example >}}
|
||||
|
||||
## Active state
|
||||
|
||||
Buttons will appear pressed (with a darker background, darker border, and inset shadow) when active. **There's no need to add a class to `<button>`s as they use a pseudo-class**. However, you can still force the same active appearance with `.active` (and include the <code>aria-pressed="true"</code> attribute) should you need to replicate the state programmatically.
|
||||
|
||||
{{< example >}}
|
||||
<a href="#" class="btn btn-primary btn-lg active" role="button" aria-pressed="true">Primary link</a>
|
||||
<a href="#" class="btn btn-secondary btn-lg active" role="button" aria-pressed="true">Link</a>
|
||||
{{< /example >}}
|
||||
|
||||
## Disabled state
|
||||
|
||||
Make buttons look inactive by adding the `disabled` boolean attribute to any `<button>` element. Disabled buttons have `pointer-events: none` applied to, preventing hover and active states from triggering.
|
||||
@@ -119,39 +110,15 @@ Do more with buttons. Control button states or create groups of buttons for more
|
||||
Add `data-toggle="button"` to toggle a button's `active` state. If you're pre-toggling a button, you must manually add the `.active` class **and** `aria-pressed="true"` to the `<button>`.
|
||||
|
||||
{{< example >}}
|
||||
<button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off">
|
||||
Single toggle
|
||||
</button>
|
||||
{{< /example >}}
|
||||
|
||||
### Checkbox and radio buttons
|
||||
|
||||
Bootstrap's `.button` styles can be applied to other elements, such as `<label>`s, to provide checkbox or radio style button toggling. Add `data-toggle="buttons"` to a `.btn-group` containing those modified buttons to enable their toggling behavior via JavaScript and add `.btn-group-toggle` to style the `<input>`s within your buttons. **Note that you can create single input-powered buttons or groups of them.**
|
||||
|
||||
The checked state for these buttons is **only updated via `click` event** on the button. If you use another method to update the input—e.g., with `<input type="reset">` or by manually applying the input's `checked` property—you'll need to toggle `.active` on the `<label>` manually.
|
||||
|
||||
Note that pre-checked buttons require you to manually add the `.active` class to the input's `<label>`.
|
||||
|
||||
{{< example >}}
|
||||
<div class="btn-group-toggle" data-toggle="buttons">
|
||||
<label class="btn btn-secondary active">
|
||||
<input type="checkbox" checked autocomplete="off"> Checked
|
||||
</label>
|
||||
</div>
|
||||
<button type="button" class="btn btn-primary" data-toggle="button" autocomplete="off">Toggle button</button>
|
||||
<button type="button" class="btn btn-primary active" data-toggle="button" autocomplete="off" aria-pressed="true">Active toggle button</button>
|
||||
<button type="button" class="btn btn-primary" disabled data-toggle="button" autocomplete="off">Disabled toggle button</button>
|
||||
{{< /example >}}
|
||||
|
||||
{{< example >}}
|
||||
<div class="btn-group btn-group-toggle" data-toggle="buttons">
|
||||
<label class="btn btn-secondary active">
|
||||
<input type="radio" name="options" id="option1" autocomplete="off" checked> Active
|
||||
</label>
|
||||
<label class="btn btn-secondary">
|
||||
<input type="radio" name="options" id="option2" autocomplete="off"> Radio
|
||||
</label>
|
||||
<label class="btn btn-secondary">
|
||||
<input type="radio" name="options" id="option3" autocomplete="off"> Radio
|
||||
</label>
|
||||
</div>
|
||||
<a href="#" class="btn btn-primary" role="button" data-toggle="button">Toggle link</a>
|
||||
<a href="#" class="btn btn-primary active" role="button" data-toggle="button" aria-pressed="true">Active toggle link</a>
|
||||
<a href="#" class="btn btn-primary disabled" role="button" data-toggle="button">Disabled toggle link</a>
|
||||
{{< /example >}}
|
||||
|
||||
### Methods
|
||||
|
||||
@@ -209,3 +209,54 @@ Omit the wrapping `.form-check` for checkboxes and radios that have no label tex
|
||||
<input class="form-check-input" type="radio" name="radioNoLabel" id="radioNoLabel1" value="" aria-label="...">
|
||||
</div>
|
||||
{{< /example >}}
|
||||
|
||||
## Toggle buttons
|
||||
|
||||
### Checkbox toggle buttons
|
||||
|
||||
Bootstrap's `.btn` styles can be applied to `<label>`s, to provide checkbox style button toggling. Add an input with a `.btn-toggle` class as previous sibling to toggle the input state.
|
||||
|
||||
{{< example >}}
|
||||
<input type="checkbox" class="btn-toggle" id="btn-toggle" autocomplete="off">
|
||||
<label class="btn btn-primary" for="btn-toggle">Single toggle</label>
|
||||
{{< /example >}}
|
||||
|
||||
{{< example >}}
|
||||
<input type="checkbox" class="btn-toggle" id="btn-toggle-2" checked autocomplete="off">
|
||||
<label class="btn btn-primary" for="btn-toggle-2">Checked</label>
|
||||
{{< /example >}}
|
||||
|
||||
### Radio toggle buttons
|
||||
|
||||
Toggle buttons can be grouped in a [button group]({{< docsref "/components/button-group" >}}) if needed.
|
||||
|
||||
{{< example >}}
|
||||
<div class="btn-group">
|
||||
<input type="radio" class="btn-toggle" name="options" id="option1" autocomplete="off" checked>
|
||||
<label class="btn btn-secondary" for="option1">Checked</label>
|
||||
|
||||
<input type="radio" class="btn-toggle" name="options" id="option2" autocomplete="off">
|
||||
<label class="btn btn-secondary" for="option2">Radio</label>
|
||||
|
||||
<input type="radio" class="btn-toggle" name="options" id="option3" autocomplete="off">
|
||||
<label class="btn btn-secondary" for="option3">Radio</label>
|
||||
</div>
|
||||
{{< /example >}}
|
||||
|
||||
### Outlined styles
|
||||
|
||||
{{< example >}}
|
||||
<input type="checkbox" class="btn-toggle" id="btn-toggle-outlined" autocomplete="off">
|
||||
<label class="btn btn-outline-primary" for="btn-toggle-outlined">Single toggle</label><br>
|
||||
|
||||
<input type="checkbox" class="btn-toggle" id="btn-toggle-2-outlined" checked autocomplete="off">
|
||||
<label class="btn btn-outline-secondary" for="btn-toggle-2-outlined">Checked</label><br>
|
||||
|
||||
<div class="btn-group">
|
||||
<input type="radio" class="btn-toggle" name="options-outlined" id="success-outlined" autocomplete="off" checked>
|
||||
<label class="btn btn-outline-success" for="success-outlined">Checked success radio</label>
|
||||
|
||||
<input type="radio" class="btn-toggle" name="options-outlined" id="danger-outlined" autocomplete="off">
|
||||
<label class="btn btn-outline-danger" for="danger-outlined">Danger radio</label>
|
||||
</div>
|
||||
{{< /example >}}
|
||||
|
||||
@@ -148,6 +148,10 @@ Badges were overhauled to better differentiate themselves from buttons and to be
|
||||
- **Todo:** Removed `.badge-pill` for the `.rounded-pill` utility class
|
||||
- **Todo:** Removed badge's hover and focus styles for `a.badge` and `button.badge`.
|
||||
|
||||
### Buttons
|
||||
|
||||
- The checkbox/radio toggle is removed from the button plugin in favour of a CSS only solution, which is documented in the [form checks]({{< docsref "/forms/checks#toggle-buttons" >}}) docs. The `.btn-toggle` class can be added to inputs, any label with `.btn` and modifier class can be used to theme the labels. [See #30650](https://github.com/twbs/bootstrap/pull/30650).
|
||||
|
||||
### Cards
|
||||
|
||||
- Removed the card columns in favor of a Masonry grid [See #28922](https://github.com/twbs/bootstrap/pull/28922).
|
||||
|
||||
Reference in New Issue
Block a user