Clickable Label for Checkbox GWT

Question

In HTML this is quite easy

<input type="checkbox" name="checkbox" id="checkbox_id" value="value" />
<label for="checkbox_id">Text</label>

[Code from] How to create an HTML checkbox with a clickable label

Not sure how it's done in GWT

My issue is I'm not sure how to replicate this in GWT with their native checkbox. This is a snippet from my ui.xml file inside an <HTMLPanel>

<table>
    <tr>
        <td align="right" ui:field="defaultCheckBoxText">Checkbox Label</td>
        <td><g:CheckBox ui:field="defaultCheckBox"/></td>
    </tr>
</table>

The way the layout is, I need to keep with the table so I can't use the label around the input technique. I mean, I can, but I would prefer to know how to do it the other way.

---

I've tried this, but it didn't work

The reason being, in the compiled GWT code, the actual ID of the element is gwt-uid-1118. I could change the label to <label for="gwt-uid-1118">, but that is not a good idea since they are dynamically generated.

<table>
    <tr>
        <td align="right" ui:field="defaultCheckBoxText"><label for="defaultCheckBox">Checkbox Label</label></td>
        <td><g:CheckBox ui:field="defaultCheckBox"/></td>
    </tr>
</table>

---

TL;DR

Anybody know how a clickable label (separate from the CheckBox) in GWT is done in the ui.xml file?

Answer 1

Try text attribute:

<g:CheckBox ui:field="checkbox" text="text"/>

EDIT. If you have a strict html structure then you need to use low level GWT components like InputElement:

Updated UiBinder:

<table>
    <tr>
        <td align="right"><label for="defaultCheckBox">Checkbox Label</label></td>
        <td><input ui:field="defaultCheckBox" id="defaultCheckBox" type="checkbox" /></td>
    </tr>
</table>

Corresponding java binding:

@UiField InputElement defaultCheckBox;