Indeterminate checkbox style

I see there is two conditions for check boxes :
https://docs.webix.com/desktop__checkbox.html

checked and unchecked. true and false.
Can I add a 3rd option? indeterminate? like a straight line through.

If not, Can I just change the the css style of checked checkbox to just a line.

I see I can change the css for the view "checkbox" but how I can change the shape of a checked checkbox.

https://www.google.com/search?q=indeterminate+checkbox&rlz=1C5CHFA_enVN868VN868&sxsrf=ALeKk00vC4c-0OLVMk2Zgm-J1SYeh6la6w:1610258515009&source=lnms&tbm=isch&sa=X&ved=2ahUKEwiWj6K22JDuAhUCwosBHdvGDMwQ_AUoAXoECBkQAw&biw=1440&bih=821

Thanks in advance.

Comments

  • edited January 16

    I see there is two conditions for check boxes:
    https://docs.webix.com/desktop__checkbox.html
    checked and unchecked. true and false.
    Can I add a 3rd option? indeterminate? like a straight line through.

    Could you please clarify on your exact use case?

    Checkboxes have two primary states only ("checked" and "unchecked"), and indeterminate checkboxes are used for visual representation only (i.e. in case of nested checkboxes). This is exactly why Webix does actually make use of three-state checkboxes in hierarchical data components (such as tree, sidebar, treetable, organogram), where it makes the most sense to use an element like that.

    On its own, using indeterminate value as a "third" checkbox state makes little sense from UX perspective, as there is no true "third" state ever in the case of this control.

    If you want a separate three-state control, you can use other options, like segmented button: https://snippet.webix.com/3dzpvzc3.

    If not, Can I just change the the css style of checked checkbox to just a line.

    Sure, you can simply change the style of the checked checkbox: https://snippet.webix.com/i4o8cxxv. Webix Checkbox control is based on standard HTML checkbox, but all the skins use either a Font Awesome (in older versions of the library) or Material Design icon to render it. This is why I am replacing the default icon with the appropriate icon from the corresponding library.

Sign In or Register to comment.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

In this Discussion