rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2024-12-02 14:24:19 +01:00
Code Issues Actions Packages Releases Activity
001b4f0d6b
Bootstrap/site/content/docs/5.0/forms/input-group.md
Patrick H. Lauke eeb73e0ccf
Docs: forms accessibility cleanup (#31114) 
* Expand on disabled fieldsets and faked buttons

include further advice/information on how to disable faked buttons for keyboard/AT users

* Centralise accessible name advice in forms overview

seems odd to only mention (separately) label, aria-label etc in input-group and layout. the advice is just as pertinent in other sections like select. checks only skims over this.

moving this, in expanded form, into the overview section itself. adding a specific cross-reference (just because they are easily left with no accname at all) in the checks page.

* Change warning about accessibility, modify server-side example

- paradoxically, due to our current problems with validation (see #28414) and the fact that browsers seem to have improved in this area for the most part, it's now actually better to use browser-native validation
- added explicit `id` and `aria-describedby` association to at least the server-side form error messages, to show how it should be done properly, and expanded the prose for that explaining this.

* Replace `.sr-only` with `.visually-hidden` in new addition

* Copy edits for clarity in parenthetical

* Copy and formatting tweaks

- Wordsmithing here and there
- Turns some hyphens into em dashes
- Turns a long running comma separated list into an unordered list
- Rearranges some copy just a bit

Co-authored-by: Mark Otto <markd.otto@gmail.com>
2020-07-11 21:38:43 +01:00

13 KiB
Raw Blame History

layout title description group toc
docs Input group Easily extend form controls by adding text, buttons, or button groups on either side of textual inputs, custom selects, and custom file inputs. forms true

Basic example

Place one add-on or button on either side of an input. You may also place one on both sides of an input. Remember to place <label>s outside the input group.

{{< example >}}

@
@example.com

$ .00
With textarea
{{< /example >}}

Wrapping

Input groups wrap by default via flex-wrap: wrap in order to accommodate custom form field validation within an input group. You may disable this with .flex-nowrap.

{{< example >}}

@
{{< /example >}}

Sizing

Add the relative form sizing classes to the .input-group itself and contents within will automatically resize—no need for repeating the form control size classes on each element.

Sizing on the individual input group elements isn't supported.

{{< example >}}

Small
Default
Large
{{< /example >}}

Checkboxes and radios

Place any checkbox or radio option within an input group's addon instead of text.

{{< example >}}

{{< /example >}}

Multiple inputs

While multiple <input>s are supported visually, validation styles are only available for input groups with a single <input>.

{{< example >}}

First and last name
{{< /example >}}

Multiple addons

Multiple add-ons are supported and can be mixed with checkbox and radio input versions.

{{< example >}}

$ 0.00
$ 0.00
{{< /example >}}

Button addons

{{< example >}}

Button
Button
Button Button
Button Button
{{< /example >}}

Buttons with dropdowns

{{< example >}}

{{< /example >}}

Segmented buttons

{{< example >}}

{{< /example >}}

Custom forms

Input groups include support for custom selects and custom file inputs. Browser default versions of these are not supported.

Custom select

{{< example >}}

Choose... One Two Three
Choose... One Two Three
Button Choose... One Two Three
Choose... One Two Three Button
{{< /example >}}

Custom file input

{{< example >}}

Upload
Upload
Button
Button
{{< /example >}}