diff options
Diffstat (limited to 'site/content/docs/5.0/forms/overview.md')
| -rw-r--r-- | site/content/docs/5.0/forms/overview.md | 10 |
1 files changed, 10 insertions, 0 deletions
diff --git a/site/content/docs/5.0/forms/overview.md b/site/content/docs/5.0/forms/overview.md index dcd8e8ccd7..40e9b6b4f1 100644 --- a/site/content/docs/5.0/forms/overview.md +++ b/site/content/docs/5.0/forms/overview.md @@ -142,3 +142,13 @@ For situations where it's not possible to include a visible `<label>` or appropr If none of these are present, assistive technologies may resort to using the `placeholder` attribute as a fallback for the accessible name on `<input>` and `<textarea>` elements. The examples in this section provide a few suggested, case-specific approaches. 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 + +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 `$btn-input-*` and `$input-*` variables. + +### Variables + +`$btn-input-*` 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. + +{{< scss-docs name="input-btn-variables" file="scss/_variables.scss" >}} |