diff options
Diffstat (limited to '')
| -rw-r--r-- | site/content/docs/5.3/forms/form-control.md (renamed from site/content/docs/5.2/forms/form-control.md) | 42 |
1 files changed, 40 insertions, 2 deletions
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). |