Input
Inputs can be styled using the .form-control class. The readonly="..." attribute is also supported, which can be used to make read-only inputs.
|
Commenting
|
New message!
Jane Doe just sent you a new message.
|
<!-- Normal input -->
<input type="text" class="form-control" placeholder="Text input">
<!-- Read-only input -->
<input type="text" class="form-control" value="Read-only input" readonly="readonly">Inputs 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 inputs 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).
Other types of inputs can also be styled using the .form-control class, such as type="number", type="email", etc. For type="checkbox", check the checkbox docs section, and for type="radio", check the radio docs section.
Sizing #
Different sizes of inputs are also available:
- Large inputs can be created by adding the .form-control-lg class.
- Small inputs can be created by adding the .form-control-sm class.
<!-- Large input -->
<input type="text" class="form-control form-control-lg" placeholder="Large input">
<!-- Regular input -->
<input type="text" class="form-control" placeholder="Regular input">
<!-- Small input -->
<input type="text" class="form-control form-control-sm" placeholder="Small input">Disabled inputs #
Inputs can be disabled by adding the disabled="..." attribute to them. In order to just style the input to look disabled, only the class .disabled can be added. However, it should be noted that this does not actually disable the input, it only styles it.
<!-- Disabled input -->
<input type="text" class="form-control" disabled="disabled" value="Disabled input">
<!-- Not actually disabled, only styled to look the part -->
<input type="text" class="form-control disabled" value="Not actually disabled, only styled">Invalid inputs #
Often times it is necessary to visually show the users that the input they have provided is invalid. This can be done by adding the class .is-invalid to the input, or by adding the .is-invalid class to a parent container with the class .form-group.
<!-- Invalid input -->
<input type="email" class="form-control is-invalid" placeholder="Email address" value="John Doe">
<!-- Invalid input through parent class -->
<div class="form-group is-invalid">
<input type="email" class="form-control" placeholder="Email address" value="Jane Doe">
</div>A complete example (with error messages) of invalid inputs can be found on this page (opens in new tab).
Alternate in dark mode #
Inputs 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) -->
<input type="email" class="form-control alt-dm" value="john@example.com">These inputs are designed to look good and be usable on the colorful backgrounds in dark mode. For example, they can be used to great effect on contextual alerts in dark mode (opens in new tab).
Up next:
Select
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.
