1
0
mirror of https://github.com/tabler/tabler.git synced 2025-12-26 19:26:10 +04:00

Required form label for horizontal forms (#1161)

* added required class to showcase in horizontal form

* support for required label class in horizontal form
This commit is contained in:
Kevin Papst
2022-07-30 12:50:36 +02:00
committed by GitHub
parent 03f5b50695
commit dc8cad144a
2 changed files with 5 additions and 4 deletions

View File

@@ -6,7 +6,7 @@
<div class="card-body">
<form>
<div class="form-group mb-3 {% if horizontal %}row{% endif %}">
<label class="form-label{% if horizontal %} col-3 col-form-label{% endif %}">Email address</label>
<label class="{% if horizontal %}col-3 col-form-label{% else %}form-label{% endif %} required">Email address</label>
<div {% if horizontal %}class="col"{% endif %}>
<input type="email" class="form-control" aria-describedby="emailHelp" placeholder="Enter email">
<small class="form-hint">We'll never share your email with anyone else.</small>
@@ -14,7 +14,7 @@
</div>
<div class="form-group mb-3 {% if horizontal %}row{% endif %}">
<label class="form-label{% if horizontal %} col-3 col-form-label{% endif %}">Password</label>
<label class="{% if horizontal %}col-3 col-form-label{% else %}form-label{% endif %} required">Password</label>
<div {% if horizontal %}class="col"{% endif %}>
<input type="password" class="form-control" placeholder="Password">
<small class="form-hint">
@@ -25,7 +25,7 @@
</div>
<div class="form-group mb-3 {% if horizontal %}row{% endif %}">
<label class="form-label{% if horizontal %} col-3 col-form-label{% endif %}">Select</label>
<label class="{% if horizontal %}col-3 col-form-label{% else %}form-label{% endif %}">Select</label>
<div {% if horizontal %}class="col"{% endif %}>
<select class="form-select">
<option>Option 1</option>
@@ -49,7 +49,7 @@
</div>
<div class="form-group {% if horizontal %}row{% else %}mb-3{% endif %}">
<label class="form-label{% if horizontal %} col-3 col-form-label pt-0{% endif %}">Checkboxes</label>
<label class="{% if horizontal %}col-3 col-form-label pt-0{% else %}form-label{% endif %}">Checkboxes</label>
<div {% if horizontal %}class="col"{% endif %}>
<label class="form-check">
<input class="form-check-input" type="checkbox" checked="">

View File

@@ -7,6 +7,7 @@ textarea {
/**
Form label
*/
.col-form-label,
.form-label {
display: block;
font-weight: $font-weight-medium;