From 5590adb06f2df719cb5d61c8fefcca51e8dc2d91 Mon Sep 17 00:00:00 2001 From: Maximilian Franzke Date: Fri, 28 Jul 2023 20:17:57 +0200 Subject: [PATCH] feat: enable a datalist example within our documentation #521 --- source/_patterns/01-elements/input/_input.md | 4 ++++ source/_patterns/01-elements/input/input.scss | 6 ++++++ source/_patterns/01-elements/input/input~auto-suggest.md | 3 ++- 3 files changed, 12 insertions(+), 1 deletion(-) diff --git a/source/_patterns/01-elements/input/_input.md b/source/_patterns/01-elements/input/_input.md index 9cc0aa1b63..28ac1120e9 100644 --- a/source/_patterns/01-elements/input/_input.md +++ b/source/_patterns/01-elements/input/_input.md @@ -10,6 +10,10 @@ We're using the construct of `label` and `input` elements shown below (both thei - "Generally, explicit labels are better supported by assistive technology." - compare to the [W3C spec](https://www.w3.org/WAI/tutorials/forms/labels/#associating-labels-implicitly), seems to be a [WCAG criteria](https://www.w3.org/TR/WCAG20-TECHS/H44.html) that for, too. - We could easily control the styling depending on the `input` elements (pseudo-)states w/o the need for JavaScript +## Auto suggestions + +You could easily integrate the possibility to provide auto suggestions to your input fields via the [`list`-attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#list) on the `input`-HTML-elements as well as adding the suggestions via the [`datalist`-HTML-element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist). Please follow up within the [Input - Auto Suggestions](/patterns/elements-input-input-auto-suggest/elements-input-input-auto-suggest.rendered.html) section. + ## Autofill For heavily supporting the user on autofilling form fields (not only, but especially on mobile browsing) with information even already available on their devices, you could use the `autocomplete` attribute, as described e.g. here diff --git a/source/_patterns/01-elements/input/input.scss b/source/_patterns/01-elements/input/input.scss index 1a4bbacb91..341f670010 100644 --- a/source/_patterns/01-elements/input/input.scss +++ b/source/_patterns/01-elements/input/input.scss @@ -17,6 +17,12 @@ width: 100%; + &[list] { + &::-webkit-calendar-picker-indicator { + margin-right: -1rem; + } + } + &:not(:placeholder-shown) { padding-bottom: 0; padding-top: to-rem($pxValue: 16); diff --git a/source/_patterns/01-elements/input/input~auto-suggest.md b/source/_patterns/01-elements/input/input~auto-suggest.md index 13d9887d24..60fc91ef9c 100644 --- a/source/_patterns/01-elements/input/input~auto-suggest.md +++ b/source/_patterns/01-elements/input/input~auto-suggest.md @@ -1,4 +1,5 @@ --- title: Input - Auto suggestions -tags: [style-1.6] --- + +You could easily integrate the possibility to provide auto suggestions to your input fields via the [`list`-attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#list) on the `input`-HTML-elements as well as adding the suggestions via the [`datalist`-HTML-element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist).