Customize toggle checkbox

[smartm0use]

Hello, I would like to customize the toggle checkbox and I'm wondering if there is a recommended way to do that.

I need a standalone toggle checkbox, a switch button, without label because I will use title HTML property to display it.
In addition I need to make it smaller, I thought that using sizing classes, such as small, tiny and so on could change the size of the toggle checkbox, but this doesn't work.

Can you help me?

[ko2in]

You can leave the label tag empty to create the toggle checkbox without a text.

<div class="ui toggle checkbox">
  <input type="checkbox" name="public">
  <label title="Subscribe to weekly newsletter"></label>
</div>

The recommended way to customize the FUI components is modify the LESS files for specific components. Here are the variables and overrides of the checkbox component for default theme.

You can turn this into your own theme by creating the theme folder under src/themes/mytheme and add your customizations of the checkbox component as src/themes/mytheme/modules/checkbox.overrides and src/themes/mytheme/modules/checkbox.variables and then configure theme config as @checkbox: mytheme and build your customizations.

[smartm0use]

Thank you.
What about adding classes for sizing?

[ko2in]

I don't think the size options for the checkbox are not common things. They mostly have the unique size and consistent design across the system.

It is more likely to depend per project and requirement that you can customize with your theme. Otherwise, you can contribute by submitting your PR for this implementation.

[smartm0use]

I agree about not having size options for common checkboxes.
I'm talking about having size options for TOGGLE button:

It is too big for my application. I think having classes for sizing could be useful.

[ko2in]

Well, I mean every types of checkbox module including toggle, and slider. If you think the size doesn't suit for your application, you can customize as explained above.

But, I don't see any reason to add size variations, since it's not common use case with various sizes for toggle in single application, whereas you could have various sizes for buttons and fields.

So, you should better set your suitable size for your checkbox module.

[smartm0use]

Why do we have size variations for buttons and fields and we don't have them for toggle and slider checkboxes?
In addition we have size variations (ad colors as well) for standalone slider.
Isn't this inconsistent?

[lubber-de]

Checkbox sizes were implemented by #886
However, when i created the PR i was also testing sizing for toggle and slider checkboxes and decided they not only look much uglier when getting (bigger) sized, but they would also have the need of a left padding adjustment

Here is my original jsfiddle adjusted to also size toggle and slider checkboxes (the rough way without padding adjustment)
I still believe they don't look good
https://jsfiddle.net/lubber/02xg5kv9/2/

[ko2in]

I've never knew that the checkbox module has size variations. Look like this has been missing in the documentation.

@smartm0use I think it does satisfy your need?

[ko2in]

@smartm0use I've tried a little play and these values will give you 30% smaller size which still look good.

@toggleLaneWidth: 2.25rem;
@toggleHandleSize: 1.25rem;
@toggleLabelOffset: 0.1em;

[smartm0use]

Great! Thank you!

[ivangomes]

@lubber-de check this out please:

https://jsfiddle.net/zestly/av27mftx/