Switch
Switches can be used to allow users to turn something on or off, where an instantaneous action is expected.
|
Commenting
|
New message!
Jane Doe just sent you a new message.
|
<!-- First switch -->
<div class="custom-switch">
<input type="checkbox" id="switch-1" value="">
<label for="switch-1">Switch 1</label>
</div>
<!-- Second switch (checked by default) -->
<div class="custom-switch">
<input type="checkbox" id="switch-2" value="" checked="checked">
<label for="switch-2">Switch 2</label>
</div>The following things should be kept in mind when using switches in Halfmoon:
- The <label> element is a requirement, as without it, the switch will not be rendered.
- The <input> element must have the type="checkbox" attribute.
- The <label> element must come after the <input> element in the container with the .custom-switch class.
- The id="..." attribute of the input and the for="..." attribute of the label should have the same value.
- Containers with the class .custom-switch have no margins (margin: 0) by default. The vertically stacked ones on this page are styled to have a margin on the bottom using a utility class. This is not shown in the code for the sake of conciseness. We recommend using a wrapper with the .form-group class inside forms. This will add a margin between the elements. See the example here (opens in new tab).
When to use over checkbox #
While it is easy to think of a switch as just a variation of a checkbox, they have fundamental differences in usage. Switches are for instantaneous actions, where users expect something to change as soon as one is toggled. Therefore, they are great for things like toggling dark mode (even though this site uses a button), changing a preference, etc. On the other hand, checkboxes require a button press to take effect, and this button is often the submit button on a form.
To learn more about this in depth, you can check out the following article: When to Use a Switch or Checkbox .
Horizontal stacking #
By default, the containers with the class .custom-switch have the display: block property. However, they can be stacked horizontally by adding the .d-inline-block utility class to them.
<!-- Horizontally stacked switches -->
<div class="custom-switch d-inline-block mr-10"> <!-- d-inline-block = display: inline-block, mr-10 = margin-right: 1rem (10px) -->
<input type="checkbox" id="switch-3" value="">
<label for="switch-3">Switch 3</label>
</div>
<div class="custom-switch d-inline-block">
<input type="checkbox" id="switch-4" value="">
<label for="switch-4">Switch 4</label>
</div>Disabled switches #
Switches can be disabled by adding the disabled="..." attribute to them.
<!-- Disabled switches -->
<div class="custom-switch">
<input type="checkbox" id="switch-5" value="" disabled="disabled">
<label for="switch-5">Switch 5 (disabled)</label>
</div>
<div class="custom-switch">
<input type="checkbox" id="switch-6" value="" checked="checked" disabled="disabled">
<label for="switch-6">Switch 6 (disabled)</label>
</div>Empty label #
As mentioned above, the <label> element is a requirement. When creating switches with empty labels, the contents of the label should be kept empty, but the element should still be there. Also, the class .blank should be added to the label. This will remove the extra margin. The next example shows a switch with an empty label inside an input group.
<!-- Input group with switch -->
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">
<!-- Switch with empty label -->
<div class="custom-switch">
<input type="checkbox" id="switch-7" value="">
<label for="switch-7" class="blank"></label>
</div>
</div>
</div>
<input type="text" class="form-control" placeholder="Input group with switch">
</div>
Up next:
File input
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.
