diff --git a/docs/_data/site-navigation.json b/docs/_data/site-navigation.json index d349699f1c..4925b8653f 100755 --- a/docs/_data/site-navigation.json +++ b/docs/_data/site-navigation.json @@ -163,6 +163,31 @@ } ] }, + { + "title": "Forms", + "links": [ + { + "title": "Checkbox & Radio", + "url": "/product/components/checkbox/" + }, + { + "title": "Inputs", + "url": "/product/components/inputs/" + }, + { + "title": "Labels", + "url": "/product/components/labels/" + }, + { + "title": "Select", + "url": "/product/components/select/" + }, + { + "title": "Textarea", + "url": "/product/components/textarea/" + } + ] + }, { "title": "Components", "links": [ @@ -202,10 +227,6 @@ "title": "Cards", "url": "/product/components/cards/" }, - { - "title": "Checkbox", - "url": "/product/components/checkbox/" - }, { "title": "Code blocks", "url": "/product/components/code-blocks/" @@ -222,14 +243,6 @@ "title": "Expandable", "url": "/product/components/expandable/" }, - { - "title": "Inputs", - "url": "/product/components/inputs/" - }, - { - "title": "Labels", - "url": "/product/components/labels/" - }, { "title": "Links", "url": "/product/components/links/" @@ -278,14 +291,6 @@ "title": "Prose", "url": "/product/components/prose/" }, - { - "title": "Radio", - "url": "/product/components/radio/" - }, - { - "title": "Select", - "url": "/product/components/select/" - }, { "title": "Sidebar widgets", "url": "/product/components/sidebar-widgets/" @@ -302,10 +307,6 @@ "title": "Tags", "url": "/product/components/tags/" }, - { - "title": "Textarea", - "url": "/product/components/textarea/" - }, { "title": "Toggle switch", "url": "/product/components/toggle-switch/" diff --git a/docs/assets/less/stacks-documentation.less b/docs/assets/less/stacks-documentation.less index 3e3867b6ca..37f3cf6f86 100644 --- a/docs/assets/less/stacks-documentation.less +++ b/docs/assets/less/stacks-documentation.less @@ -11,7 +11,7 @@ // ============================================================================ // $ IMPORTS // ---------------------------------------------------------------------------- -@import "../../../lib/css/stacks.less"; // These are actual styles used in SO projects +@import (reference) "../../../lib/css/stacks.less"; // These are actual styles used in SO projects .stacks-section { margin-top: var(--su48); diff --git a/docs/product/components/checkbox.html b/docs/product/components/checkbox.html index 9126be3911..953dec32ca 100644 --- a/docs/product/components/checkbox.html +++ b/docs/product/components/checkbox.html @@ -1,73 +1,92 @@ --- layout: page -title: Checkbox +title: Checkbox & Radio figma: https://www.figma.com/file/GQB9GupHvraMioGRPbwKhO/Form-Elements -description: A checkable input that visually shows if an option is true or false. +description: Checkable inputs that visually allow for multiple options or true/false values. ---
+ {% tip, "warning", "mb24" %} + Deprecation: the markup for checkboxes and radios has changed. Please update your markup to match the new structure detailed on this page. + {% endtip %} {% header "h2", "Base style" %}
{% highlight html %} - -
-
-
- -
- -
-
+ +
+ + +
+ + +
+ + +
-
-
-
- -
- -
-
+
+ + +
+ +
+ + +
{% endhighlight %}
- -
-
-
- +
+
+ +
+ +
- -
-
- -
-
-
- + +
+ +
- -
-
- -
-
-
- + +
+ +
- -
-
- -
-
-
- + +
+ +
- -
-
+ +
+ +
+ + +
+ + +
+ + +
+ + +
+ + +
+ + +
+ + +
+
+
@@ -77,8 +96,8 @@

The best accessibility is semantic HTML. Most screen readers understand how to parse inputs if they’re correctly formatted. When it comes to checkboxes, there are a few things to keep in mind:

For more information, please read Gov.UK’s article, "Using the fieldset and legend elements".

@@ -88,60 +107,72 @@ {% header "h3", "Vertical group" %}
{% highlight html %} -
- Which types of fruit do you like? (Check all that apply) -
-
-
- -
- -
+ +
+ Which types of fruit do you like? (Check all that apply) +
+ +
-
-
-
- -
- -
+
+ +
-
-
-
- -
- -
+
+ + +
+
+ + +
+ Which fruit do you like best? +
+ + +
+
+ + +
+
+ +
{% endhighlight %}
-
- Which types of fruit do you like? (Check all that apply) -
-
-
- -
- -
+ +
+ Which types of fruit do you like? (Check all that apply) +
+ +
-
-
-
- -
- -
+
+ +
-
-
-
- -
- -
+
+ + +
+
+ + +
+ Which fruit do you like best? +
+ + +
+
+ + +
+
+ +
@@ -150,68 +181,72 @@ {% header "h3", "Horizontal group" %}
{% highlight html %} -
- Which types of fruit do you like? (Check all that apply) -
-
-
-
-
- -
- -
-
-
-
-
- -
- -
-
-
-
-
- -
- -
-
-
+ +
+ Which types of fruit do you like? (Check all that apply) +
+ + +
+
+ + +
+
+ + +
+
+ + +
+ Which fruit do you like best? +
+ + +
+
+ + +
+
+ +
{% endhighlight %}
-
- Which types of fruit do you like? (Check all that apply) -
-
-
-
-
- -
- -
-
-
-
-
- -
- -
-
-
-
-
- -
- -
-
-
+ +
+ Which types of fruit do you like? (Check all that apply) +
+ + +
+
+ + +
+
+ + +
+
+ + +
+ Which fruit do you like best? +
+ + +
+
+ + +
+
+ +
@@ -220,90 +255,81 @@ {% header "h3", "With description copy" %}
{% highlight html %} -
- Which types of fruit do you like? (Check all that apply) -
-
-
- -
-
- -
-
+
+ Which types of fruit do you like? (Check all that apply) +
+ +
-
-
-
- -
-
- -
-
+
+ +
-
-
-
- -
-
- -
-
+
+ +
{% endhighlight %}
-
- Which types of fruit do you like? (Check all that apply) -
-
-
- -
-
- -
-
+ +
+ Which types of fruit do you like? (Check all that apply) +
+ +
-
-
-
- -
-
- -
-
+
+ +
-
-
-
- -
-
- -
-
+
+ + +
+
+ + +
+ Which fruit do you like best? +
+ + +
+
+ + +
+
+ +
@@ -317,16 +343,10 @@
{% highlight html %} -
-
-
-
- -
- -
+
+
+ +
@@ -335,14 +355,10 @@ {% endhighlight %}
-
-
-
-
- -
- -
+
+
+ +
@@ -381,90 +397,108 @@ {% header "h3", "Validation examples" %}
{% highlight html %} -
- Which types of fruit do you like? (Check all that apply) -
-
-
- -
-
- -
-
+ +
+ Which types of fruit do you like? (Check all that apply) +
+ +
-
-
-
- -
-
- -
-
+
+ +
-
-
-
- -
-
- -
-
+
+ + +
+
+ + +
+ Which fruit do you like best? +
+ + +
+
+ + +
+
+ +
{% endhighlight %}
-
- Which types of fruit do you like? (Check all that apply) -
-
-
- -
-
- -
-
+ +
+ Which types of fruit do you like? (Check all that apply) +
+ +
-
-
-
- -
-
- -
-
+
+ +
-
-
-
- -
-
- -
-
+
+ + +
+
+ + +
+ Which fruit do you like best? +
+ + +
+
+ + +
+
+ +
diff --git a/docs/product/components/radio.html b/docs/product/components/radio.html deleted file mode 100644 index 7a97fa0601..0000000000 --- a/docs/product/components/radio.html +++ /dev/null @@ -1,435 +0,0 @@ ---- -layout: page -title: Radio -figma: https://www.figma.com/file/GQB9GupHvraMioGRPbwKhO/Form-Elements -description: An input group which can only have one entry selected at a time. ---- -
- {% header "h2", "Base style" %} -
-{% highlight html %} - -
- Which radio is best? -
-
- -
- -
-
- - -
- Which radio is best? -
-
- -
- -
-
-{% endhighlight %} -
- -
-
-
- -
- -
-
- - -
-
-
- -
- -
-
- - -
-
-
- -
- -
-
- - -
-
-
- -
- -
-
-
-
-
- -
- {% header "h2", "Accessibility" %} -

The best accessibility is semantic HTML. Most screen readers understand how to parse inputs if they're correctly formatted. When it comes to radios, there are a few things to keep in mind:

-
    -
  • All inputs should have an id attribute.
    • -
  • Be sure to associate the radio label by using the for attribute. The value here is the input’s id.
    • -
  • Use the fieldset and legend elements for grouping radio options together.
    • -
-

For more information, please read Gov.UK’s article, "Using the fieldset and legend elements".

-
- -
- {% header "h2", "Examples" %} - {% header "h3", "Vertical group" %} -
-{% highlight html %} -
- Which fruit do you like best? -
-
-
- -
- -
-
-
-
-
- -
- -
-
-
-
-
- -
- -
-
-
-{% endhighlight %} -
-
- Which fruit do you like best? -
-
-
- -
- -
-
-
-
-
- -
- -
-
-
-
-
- -
- -
-
-
-
-
- - {% header "h3", "Horizontal group" %} -
-{% highlight html %} -
- Which fruit do you like best? -
-
-
-
-
- -
- -
-
-
-
-
- -
- -
-
-
-
-
- -
- -
-
-
-
-
-{% endhighlight %} -
-
- Which fruit do you like best? -
-
-
-
-
- -
- -
-
-
-
-
- -
- -
-
-
-
-
- -
- -
-
-
-
-
-
-
- - {% header "h3", "With description copy" %} -
-{% highlight html %} -
- Which fruit do you like best? -
-
-
- -
-
- -
-
-
-
-
-
- -
-
- -
-
-
-
-
-
- -
-
- -
-
-
-
-{% endhighlight %} -
-
- Which fruit do you like best? -
-
-
- -
-
- -
-
-
-
-
-
- -
-
- -
-
-
-
-
-
- -
-
- -
-
-
-
-
-
-
- -
- {% header "h2", "Validation states" %} -

Radio inputs use the same validation states as inputs.

- - {% header "h3", "Validation classes" %} -
- - - - - - - - - - {% for item in inputs.radio %} - {% assign state = item.validation %} - {% for class in state %} - - - - - - {% endfor %} - {% endfor %} - -
ClassAppliesDescription
{{ class.class }}{{ class.applies }}{{ class.description }}
-
- - {% header "h3", "Validation examples" %} -
-{% highlight html %} -
- Which fruit do you like best? -
-
-
- -
-
- -
-
-
-
-
-
- -
-
- -
-
-
-
-
-
- -
-
- -
-
-
-
-{% endhighlight %} -
-
- Which fruit do you like best? -
-
-
- -
-
- -
-
-
-
-
-
- -
-
- -
-
-
-
-
-
- -
-
- -
-
-
-
-
-
-
diff --git a/lib/css/components/inputs.less b/lib/css/components/inputs.less index 6dfa04f2a3..c393c837f1 100644 --- a/lib/css/components/inputs.less +++ b/lib/css/components/inputs.less @@ -268,6 +268,44 @@ fieldset { // ============================================================================ // $ CHECKBOXES & RADIOS // ---------------------------------------------------------------------------- +// TODO would _love_ to use .s-check instead, with no class on the input itself +.s-check-control { + display: flex; + gap: var(--su8); + align-items: center; + + [disabled] + .s-label { + &:extend(.is-disabled .s-label); + } + + .s-label { + font-weight: normal; + } +} + +.s-check-group { + display: flex; + flex-direction: column; + gap: var(--su8); + + &&__horizontal { + flex-direction: row; + } + + // TODO HACK? isn't respecting gap... + legend.s-label { + margin-bottom: var(--su8); + } + + // manually align the checkboxes and radios to the top of the group + .s-check-control { + align-items: flex-start; + } + .s-checkbox, .s-radio { + margin-top: calc(var(--su2) + var(--su1)); // 3px + } +} + .s-checkbox, .s-radio { // [1] Check to see if we can use custom styles, if so reset the defaults