DBTag [removeable]: includes a lot of unused/not displayed DOM from DBCheckbox

[annsch]

Which generators are impacted?

• [ ] All
• [ ] HTML
• [X] React
• [ ] Angular
• [ ] Vue
• [ ] Web components
• [ ] Power Apps

Reproduction case

Currently DB Tag with prop "removeable" also includes a lot of not displayed HTML Code generated by checkboxes' validation () – is this really necessary?

<div class="db-tag" data-semantic="successful" data-icon="plus">
     <div class="db-checkbox">
           <label for="checkbox">
                <input type="checkbox">
                Label-Text
           </label>
         <span id="checkbox-valid-message" class="db-infotext" data-semantic="successful" data-size="small">TODO: Add a validMessage</span>
         <span id="checkbox-invalid-message" class="db-infotext" data-semantic="critical" data-size="small">TODO: Add an invalidMessage</span>
    </div>
</div>

Expected Behaviour

When using DB Tag with removeable option, a lighter version of DBCheckbox should be rendered

Screenshots

No response

Browser version

None

Add any other context about the problem here.

No response

[nmerget]

You should be able to do something like this as well:

<DBTag>
   <label>
    <input type="checkbox" />
    Test
    </label>
</DBTag>

We need to fix this. DBTag should be just styling.

Maybe we could consider if we want to remove the additional span via JS. What do you think @mfranzke?

[mfranzke]

You should be able to do something like this as well:

<DBTag>
   <label>
  <input type="checkbox" />
    Test
    </label>
</DBTag>

We need to fix this. DBTag should be just styling.

Maybe we could consider if we want to remove the additional span via JS. What do you think @mfranzke?

this sounds a little fragile to me. Additionally we would manipulate what the users have inserted and probably intended differently in here. What about not using DBCheckbox in the firstplace, but only provide documentation for the construct that you suggested?

<label>
    <input type="checkbox" />
    Test
    </label>