diff options
| author | Mark Otto <markd.otto@gmail.com> | 2020-09-29 21:39:37 +0300 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2020-09-29 21:39:37 +0300 |
| commit | 319954d369a09c1bca1fc1721f6977e3a7b1d86d (patch) | |
| tree | 43bbf3725fa94eb95436ee7923a47109144d9f1f /site/content/docs/5.0/forms | |
| parent | cda9278f495af4ccc1f025c25eed1b18d64428b7 (diff) | |
v5: Add disabled examples for .form-control, .form-select, and .form-range (#31686)
* Add disabled state example to the .form-control page
* Document disabled attribute on select too
* Add disabled example for file input
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
Diffstat (limited to 'site/content/docs/5.0/forms')
| -rw-r--r-- | site/content/docs/5.0/forms/form-control.md | 9 | ||||
| -rw-r--r-- | site/content/docs/5.0/forms/range.md | 9 | ||||
| -rw-r--r-- | site/content/docs/5.0/forms/select.md | 13 |
3 files changed, 31 insertions, 0 deletions
diff --git a/site/content/docs/5.0/forms/form-control.md b/site/content/docs/5.0/forms/form-control.md index 3f10138e99..0287a90d23 100644 --- a/site/content/docs/5.0/forms/form-control.md +++ b/site/content/docs/5.0/forms/form-control.md @@ -29,6 +29,15 @@ 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 >}} +## Disabled + +Add the `disabled` boolean attribute on an input to give it a grayed out appearance and remove pointer events. + +{{< example >}} +<input class="form-control" type="text" placeholder="Disabled input" aria-label="Disabled input example" disabled> +<input class="form-control" type="text" placeholder="Disabled readonly input" aria-label="Disabled input example" disabled readonly> +{{< /example >}} + ## Readonly Add the `readonly` boolean attribute on an input to prevent modification of the input's value. Read-only inputs appear lighter (just like disabled inputs), but retain the standard cursor. diff --git a/site/content/docs/5.0/forms/range.md b/site/content/docs/5.0/forms/range.md index d1ca869bf8..7e95e0edff 100644 --- a/site/content/docs/5.0/forms/range.md +++ b/site/content/docs/5.0/forms/range.md @@ -15,6 +15,15 @@ Create custom `<input type="range">` controls with `.form-range`. The track (the <input type="range" class="form-range" id="customRange1"> {{< /example >}} +## Disabled + +Add the `disabled` boolean attribute on an input to give it a grayed out appearance and remove pointer events. + +{{< example >}} +<label for="disabledRange" class="form-label">Disabled range</label> +<input type="range" class="form-range" id="disabledRange" disabled> +{{< /example >}} + ## Min and max Range inputs have implicit values for `min` and `max`—`0` and `100`, respectively. You may specify new values for those using the `min` and `max` attributes. diff --git a/site/content/docs/5.0/forms/select.md b/site/content/docs/5.0/forms/select.md index e8c62e8f3d..e2b0bd6a81 100644 --- a/site/content/docs/5.0/forms/select.md +++ b/site/content/docs/5.0/forms/select.md @@ -60,3 +60,16 @@ As is the `size` attribute: <option value="3">Three</option> </select> {{< /example >}} + +## Disabled + +Add the `disabled` boolean attribute on a select to give it a grayed out appearance and remove pointer events. + +{{< example >}} +<select class="form-select" aria-label="Disabled select example" disabled> + <option selected>Open this select menu</option> + <option value="1">One</option> + <option value="2">Two</option> + <option value="3">Three</option> +</select> +{{< /example >}} |