Skip to content

Commit

Permalink
Update some docs comments
Browse files Browse the repository at this point in the history
  • Loading branch information
mdo committed Jun 13, 2022
1 parent a5091cb commit 9d2caef
Show file tree
Hide file tree
Showing 2 changed files with 4 additions and 4 deletions.
2 changes: 1 addition & 1 deletion scss/forms/_form-control.scss
Expand Up @@ -59,7 +59,7 @@
opacity: 1;
}

// Disabled and read-only inputs
// Disabled inputs
//
// HTML5 says that controls under a fieldset > legend:first-child won't be
// disabled if the fieldset is disabled. Due to implementation difficulty, we
Expand Down
6 changes: 3 additions & 3 deletions site/content/docs/5.2/forms/form-control.md
Expand Up @@ -31,7 +31,7 @@ Set heights using classes like `.form-control-lg` and `.form-control-sm`.

## Disabled

Add the `disabled` boolean attribute on an input to give it a grayed out appearance and remove pointer events.
Add the `disabled` boolean attribute on an input to give it a grayed out appearance, remove pointer events, and prevent focusing.

{{< example >}}
<input class="form-control" type="text" placeholder="Disabled input" aria-label="Disabled input example" disabled>
Expand All @@ -40,15 +40,15 @@ Add the `disabled` boolean attribute on an input to give it a grayed out appeara

## Readonly

Add the `readonly` boolean attribute on an input to prevent modification of the input's value.
Add the `readonly` boolean attribute on an input to prevent modification of the input's value. `readonly` inputs can still be focused and selected, while `disabled` inputs cannot.

{{< example >}}
<input class="form-control" type="text" value="Readonly input here..." aria-label="readonly input example" readonly>
{{< /example >}}

## Readonly plain text

If you want to have `<input readonly>` elements in your form styled as plain text, use the `.form-control-plaintext` class to remove the default form field styling and preserve the correct margin and padding.
If you want to have `<input readonly>` elements in your form styled as plain text, replace `.form-control` with `.form-control-plaintext` to remove the default form field styling and preserve the correct `margin` and `padding`.

{{< example >}}
<div class="mb-3 row">
Expand Down

0 comments on commit 9d2caef

Please sign in to comment.