label for checkbox group on border

Topic: label for checkbox group on border

dwilbur priority asked 2 years 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.

Add comment

dwilbur priority answered 2 years ago

0 0 Best answer

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>

Mateusz Lazaru 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 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

Add comment

Mateusz Lazaru staff answered 2 years ago