Topic: label for checkbox group on border
I'm wondering if there is a way to make a box outlining a group of checkboxes have a label that is overlapping the top border much like many of the other fields have if they have a label...
for example something like the following:
<div id="checkboxes" class="border">
<label for="checkboxes">Checkboxes:</label>
<!-- Default checkbox -->
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="flexCheckDefault" />
<label class="form-check-label" for="flexCheckDefault">Default checkbox</label>
</div>
<!-- Checked checkbox -->
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="flexCheckChecked" checked />
<label class="form-check-label" for="flexCheckChecked">Checked checkbox</label>
</div>
</div>
I'm new to MDB so I apologize if it's in the doc. the way it is now, the checkbox group looks like it doesn't belong with the other fields due to a different type of labeling.
Hi,
form-control class may be what you are looking for.
https://mdbootstrap.com/snippets/standard/mlazaru/4345762#html-tab-view
well that appears to be a better choice then border. but compare that to the behavior of what happens to the label when you enter this text field to that of clicking or tabbing into a checkbox.
<div class="form-outline">
<input type="text" id="typeText" class="form-control" />
<label class="form-label" for="typeText">Text input</label>
</div>
mlazaru staff commented 2 years ago
Do you want to add a blue border or label behaviour for form-check on the focus?
If so, there is no way to do this as both the label animation and border styles are designed for form-outline, which do not work with form-check.
dwilbur pro premium priority commented 2 years ago
ah, so basically what i am asking for is there a way to get the form-outline behavior to work for a border around a group of checkboxes so it is labeled in a similar way to other fields in the form.
Grzegorz Bujański staff commented 2 years ago
Unfortunately we do not have this feature. But I will add it to the list of ideas and maybe one day we will add such a feature
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- Premium support: Yes
- Technology: MDB Standard
- MDB Version: MDB5 5.0.0
- Device: NA
- Browser: NA
- OS: NA
- Provided sample code: No
- Provided link: No