Textarea
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.
|
Commenting
|
New message!
Jane Doe just sent you a new message.
|
<!-- 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>
</div>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
Help us grow
Our goal is to make Halfmoon the go-to framework for building dashboards and tools on the web. We are already working on things like a form validator, number input, datepicker, multi-select (think Select2 without jQuery), tabs component, JSX docs, and so much more. You can learn more in the project roadmap.
However, we need your help to grow. So if you truly believe in our goal, please consider supporting us through Patreon.
Gold sponsor
The following is the highest tier, with a maximum of 1 sponsor.
(Also seen at the top of the page)
Sponsors
The following is the normal tier, with a maximum of 10 sponsors.
AYCD
Automation Done Right
Sponsor image placeholder
Sponsor (9 available)
Halfmoon needs your support! Become a sponsor to place an image and description of your product here. Click here
Backers
The following people have generously decided to support Halfmoon.
- Ethan Fann
- Julia Koblitz
- Benjamin Listwon
- Sean Lindsay
- Daan
Become a backer on Patreon .
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.
