Right now, in our tutorials we only have an example of a custom slider field renderer. But I bet some of the developers will have some good guidance for you creating a custom checkbox renderer.

Peter, here is an example that should do basically what you’re looking for. This is a custom field renderer suitable for use with any Checkbox / “BOOLEAN” -type field. For this renderer, I’ve used some Inline CSS (to provide the unchecked / checked images) as well as an Inline Snippet.

.custom-checkbox { width: 20px; height: 20px; background-repeat:no-repeat; background-size: 20px 20px; position:relative; float: left; } .custom-checkbox.unchecked { background-image: url('http://bit.ly/YqrnUb') } .custom-checkbox.checked { background-image: url('http://bit.ly/Iv1tYS') } 

And here’s the Inline Snippet:

var field = argumentsd0], value = argumentse1], isChecked = ((value == "true") || (value === true)), $ = skuid.$; var setImageSource = function(img,checked) { if (checked) { img.removeClass('unchecked'); img.addClass('checked'); } else { img.removeClass('checked'); img.addClass('unchecked'); } }; var swapImage = function(img) { var newVal = !img.hasClass('checked'); setImageSource(img,newVal); return newVal; }; // READ MODE if (field.mode == 'read') { var fieldContainer = $('').css({ 'padding' : '0px', 'opacity' : '0.5' }); var img = $('').addClass('custom-checkbox'); img.appendTo(fieldContainer); setImageSource(img,isChecked); (field.editable) && fieldContainer.append( '' ); field.element.append(fieldContainer); } // EDIT MODE else { var img = $('').addClass('custom-checkbox'); setImageSource(img,isChecked); field.element.append(img); img.on('click',function(){ var newValue = swapImage(img); field.model.updateRow(field.row,field.id,newValue,{ initiatorId : field._GUID}); }); } 

Here’s the final product:

Is there any way to specify the height/width in the CSS as percentages rather than pixels?