Label on CheckBox or RadioButton

Label on CheckBox or RadioButton

  
I believe this should be included in the next version of the platform, however, since it's so simple I didn't bother creating WOC topic with it.
A "Label" property for checkbox and radio elements. :)
That way you can set a text for the element, and use that text to check/uncheck it.

Here's how to do it with some jQuery:
"<script type=""text/JavaScript"">
osjs('#" + CheckboxId + "').after(""<label for='" + CheckboxId + "' style='margin-left: 5px; position: relative; top: 1px'>" + Label + "</label>"");
</script>"
Hope it's useful to someone else :)
Completely agreed... it would be great to have labels semantic in this way.

At the moment, on the project we're working on, we have many forms with buttons and checkboxes, and the clickable area for the buttons are tiny. Users are now used to being able to click on labels to select checkboxes - so to have this built-in as part of the platform (perhaps as a field on the element inspector) would be great. :)

Thanks Antonio for the JQuery snippet - I've adapted it to use in my own project.
António Chinita wrote:
I believe this should be included in the next version of the platform, however, since it's so simple I didn't bother creating WOC topic with it.
A "Label" property for checkbox and radio elements. :)
That way you can set a text for the element, and use that text to check/uncheck it.

Here's how to do it with some jQuery:
"<script type=""text/JavaScript"">
osjs('#" + CheckboxId + "').after(""<label for='" + CheckboxId + "' style='margin-left: 5px; position: relative; top: 1px'>" + Label + "</label>"");
</script>"
Hope it's useful to someone else :)
Hi António,

 I've got a need for just that what you described, adding a text label beside a Radio Button, and being able to click on the text as well as the radio button itself to have it selected.

Being fairly new to Outsystems, I have no clue on where to put the jQuery snippet you provided, and how to use it to get a label beside a radio button.

Could you give me a small example?

Peter

It could be done with CSS like this:


SyntaxEditor Code Snippet

input#RichWidgets_wt40_block_wtMainContent_wtdvdCheckbox {
    margin-right: 80px;
}

input#RichWidgets_wt40_block_wtMainContent_wtdvdCheckbox:after {
    content: "Clickable checkbox label";
    margin-left: 16px;
    white-space: nowrap;
    margin-right: 200px;
}


But I am impressed that it is not possible to create handy radio or checkbox with labels out of the box.

Edit: it can simply be done with standard label element. Maybe not so obvious, but absolutely working.

Hey

another thing it can be done its to surround the radio button and label ( or text ) in a container. 

Then in the container in the "Extended Properties" you can use the "OnClick" event to select the combobox 


Cheers

Vincent, seems to be overkill. When it can be done with standard features, I will always prefer the standard way. And I don't need to think about how to change everything when I need onclick event for something else. Additionally it looks shifted to the top:


So I think the best way is to set a name to checkbox, so one can use #id and after that add to CSS

label#RichWidgets_wt42_block_wtMainContent_wtLabel1 {
    margin-left: 0px;
}

That looks perfect:

Anyway, thanks for suggestion.