Textareas allow users to enter multi-line text inputs. They can be styled using the .form-control class. The readonly="..." attribute is also supported, which can be used to make read-only textareas.

<!-- Normal textarea -->
<textarea class="form-control" placeholder="Normal textarea for multi-line input"></textarea>

<!-- Read-only textarea -->
<textarea class="form-control" readonly="readonly">This textarea is read-only, so it can not be edited by the user. It can only be read.</textarea>

Textareas with the class .form-control will take up the full width of the parent container and have no margins (margin: 0) by default. All the textareas on this page are placed inside containers with a width of 40rem (400px), and a maximum width of 100%. They are also styled to have a margin on the bottom using a utility class. None of this is shown in the code for the sake of conciseness. We recommend using a wrapper with the class .form-group inside forms. This will provide a margin between the elements. See the example here (opens in new tab).

Sizing #

Different sizes of textareas are also available:

  • Large textareas can be created by adding the .form-control-lg class.
  • Small textareas can be created by adding the .form-control-sm class.
<!-- Large textarea -->
<textarea class="form-control form-control-lg" placeholder="Large textarea for multi-line input"></textarea>

<!-- Regular textarea -->
<textarea class="form-control" placeholder="Regular textarea for multi-line input"></textarea>

<!-- Small textarea -->
<textarea class="form-control form-control-sm" placeholder="Small textarea for multi-line input"></textarea>

Disabled textareas #

Textareas can be disabled by adding the disabled="..." attribute to them. In order to just style the textarea to look disabled, only the class .disabled can be added. However, it should be noted that this does not actually disable the textarea, it only styles it.

<!-- Disabled textarea -->
<textarea class="form-control" disabled="disabled">Disabled textarea</textarea>

<!-- Not actually disabled, only styled to look the part -->
<textarea class="form-control disabled">Not actually disabled, only styled. Therefore, it can still be edited. So this method is obviously not recommended.</textarea>

Invalid textareas #

Adding the class .is-invalid to a textarea provides a visual cue to the users that the provided input is not valid (for whatever reason). This can also be achieved by adding the .is-invalid class to a parent container with the .form-group class.

<!-- Invalid textarea -->
<textarea class="form-control is-invalid">Input that is not valid for some reason</textarea>

<!-- Invalid textarea through parent container -->
<div class="form-group is-invalid">
  <textarea class="form-control">Input that is also not valid. This time, the styling is coming through the parent container.</textarea>

You can check out the example here (opens in new tab) to see how error messages can be combined with invalid form-controls. It should be noted that while the example uses <input> elements and not <textarea> elements, the same concepts can be easily applied with textareas.

Alternate in dark mode #

Textareas with the class .alt-dm will have an alternate appearance in dark mode. Their appearance will be unchanged in light mode.

<!-- Alternate in dark mode (unchanged in light mode) -->
<textarea class="form-control alt-dm">Textarea with an alternate appearance only in dark mode. It will be completely normal in light mode.</textarea>

These textareas are designed to look good and be usable on the colorful backgrounds in dark mode. You can check out the example here (opens in new tab) to get a better idea. Once again, it should be noted that while the example uses <input> elements and not <textarea> elements, the same concepts can be easily applied with textareas.

Up next: Checkbox

Coming soon

  • More components
  • More variables and customization
  • Form builder and validator JS
  • Themes and templates

Subscribe for updates

  • We will notify you when the framework gets a substantial update. No spam or marketing.
  • You can also follow us on Twitter and stay updated that way.