Topic: label for checkbox group on border

dwilbur priority asked 3 months ago


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.


dwilbur priority answered 3 months ago


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 3 months 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 priority commented 3 months 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 3 months 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


mlazaru staff answered 3 months ago


Hi,

form-control class may be what you are looking for.

https://mdbootstrap.com/snippets/standard/mlazaru/4345762#html-tab-view



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • User: Priority
  • 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