docs fixes

pages/_docs/form-elements.md

@@ -3,142 +3,113 @@ title: Form Elements
 bootstrap-link: components/forms/
 ---
 
-### Classic Input
+## Classic Inputs
 
 {% capture code %}
-<div class="mb-2">
-  <label class="form-label">Static</label>
-<div class="form-control-plaintext">Username</div>
-</div>
-
-<div class="mb-2">
-  <label class="form-label">Text</label>
-  <input type="text" class="form-control" name="example-text-input" placeholder="Text..">
-</div>
-
-<div class="mb-2">
-   <label class="form-label">Disabled</label>
-   <input type="text" class="form-control" name="example-disabled-input" placeholder="Disabled.."
-          value="Well, she turned me into a newt." disabled>
-</div>
-<div class="mb-2">
-   <label class="form-label">Readonly</label>
-   <input type="text" class="form-control" name="example-disabled-input" placeholder="Disabled.."
-          value="Well, how'd you become king, then?" readonly>
-</div>
+{% include parts/form/input.html type="text" hint="Here's some more info." %}
+{% include parts/form/input.html type="password" hint="Here's some more info." %}
 {% endcapture %}
 {% include example.html code=code %}
 
-### Password and validation
+## Textarea and select
+
 {% capture code %}
-<div class="mb-2">
-   <label class="form-label">Password</label>
-   <input type="password" class="form-control" name="example-password-input" placeholder="Password..">
-</div>
+{% include parts/form/input.html type="textarea" %}
 
-<div class="mb-2">
-   <label class="form-label">Valid State</label>
-   <input type="text" class="form-control is-valid" name="example-text-input-valid"
-          placeholder="Valid State..">
-
-   <input type="text" class="form-control mt-3 state-valid" value="Valid state">
-</div>
-
-<div class="mb-2">
-   <label class="form-label">Invalid State</label>
-   <input type="text" class="form-control is-invalid" name="example-text-input-invalid"
-          placeholder="Invalid State..">
-   <div class="invalid-feedback">Invalid feedback</div>
-
-   <input type="text" class="form-control mt-3 state-invalid" value="Invalid state">
-</div>
+{% include parts/form/select.html %}
+{% include parts/form/select.html label="Select multiple" multiple=true %}
 {% endcapture %}
 {% include example.html code=code %}
 
-### Input size
+## Validation states
 
+{% capture code %}
+{% include parts/form/validation-states.html %}
+{% include example.html code=code %}
+
+### Subtle validation states
+
+{% capture code %}
+{% include parts/form/validation-states.html lite=true %}
+{% include example.html code=code %}
+
+## Input size
+
+{% capture code %}
 {% include parts/form/input-sizes.html %}
-
-
-### Select
-{% capture code %}
-{% include parts/form/select.html options="Germany,USA,Poland" %}
 {% endcapture %}
 {% include example.html code=code %}
 
-### Textarea
-{% capture code %}
-<div class="mb-2">
-   <label class="form-label">Textarea <span class="form-label-description">56/100</span></label>
-   <textarea class="form-control" name="example-textarea-input" rows="6" placeholder="Content..">Oh! Come and see the violence inherent in the system! Help, help, I'm being repressed! We shall say 'Ni' again to you, if you do not appease us. I'm not a witch. I'm not a witch. Camelot!</textarea>
-</div>
-{% endcapture %}
-{% include example.html code=code %}
+## Image check
 
-### Image check
 {% capture code %}
 {% include parts/form/input-image.html %}
 {% endcapture %}
-{% include example.html code=code %}
+{% include example.html code=code max-width="25rem" %}
+
+## Input color
 
-### Input color
 {% capture code %}
 {% include parts/form/input-color.html %}
 {% endcapture %}
 {% include example.html code=code %}
 
-### Input color picker
+## Input color picker
+
 {% capture code %}
 {% include parts/form/input-colorpicker.html %}
 {% endcapture %}
 {% include example.html code=code %}
 
-### Datalists
+## Datalists
+
 {% capture code %}
 {% include parts/form/input-datalist.html %}
 {% endcapture %}
 {% include example.html code=code %}
 
-### Custom selectboxes
+## Custom selectboxes
+
 {% capture code %}
 {% include parts/form/input-selectgroups.html %}
 {% endcapture %}
 {% include example.html code=code %}
 
-### Toggle switches
+## Toggle switches
+
 {% capture code %}
 {% include parts/form/input-toggle.html %}
 {% include parts/form/input-toggle-single.html %}
 {% endcapture %}
 {% include example.html code=code %}
 
-### Radios
+## Radios
 {% capture code %}
 {% include parts/form/input-radios.html %}
 {% include parts/form/input-radios-inline.html %}
 {% endcapture %}
 {% include example.html code=code %}
 
-### Checkboxes
+## Checkboxes
 {% capture code %}
 {% include parts/form/input-checkboxes.html %}
 {% include parts/form/input-checkboxes-inline.html %}
 {% endcapture %}
 {% include example.html code=code %}
 
-### Range input
+## Range input
 {% capture code %}
 {% include parts/form/input-range.html %}
 {% endcapture %}
 {% include example.html code=code %}
 
-### Sample form
+## Sample form
 {% capture code %}
 {% include parts/form/fieldset.html %}
 {% endcapture %}
 {% include example.html code=code %}
 
-### Input group
+## Input group
 {% capture code %}
 <div class="mb-2">
    <label class="form-label">Input group</label>
@@ -175,19 +146,19 @@ bootstrap-link: components/forms/
 {% endcapture %}
 {% include example.html code=code %}
 
-### Input with icon
+## Input with icon
 {% capture code %}
 {% include parts/form/input-icon.html %}
 {% endcapture %}
 {% include example.html code=code %}
 
-### Separated inputs
+## Separated inputs
 {% capture code %}
 {% include parts/form/input-icon-separated.html %}
 {% endcapture %}
 {% include example.html code=code %}
 
-### Custom Input examples
+## Custom Input examples
 {% capture code %}
 <div class="mb-2">
    <label class="form-label">Username</label>
@@ -211,7 +182,7 @@ bootstrap-link: components/forms/
 {% endcapture %}
 {% include example.html code=code %}
 
-### Date component
+## Date component
 {% capture code %}
 <div class="mb-2">
    <label class="form-label">Date of birth</label>
@@ -252,7 +223,7 @@ bootstrap-link: components/forms/
 {% endcapture %}
 {% include example.html code=code %}
 
-### Input with button
+## Input with button
 {% capture code %}
 <div class="mb-2">
    <label class="form-label">Button input</label>