What is the best way to style an Input.checkbox?


I would like to have a cell with an Inputs.checkbox where the label and options are all on separate lines like so:
example screenshot of Inputs.checkbox not inline

I am currently using a stylesheet cell to do this in my example notebook, but I see that is not ideal.

  form.oi-ec050e {display: block;}
  .oi-ec050e-checkbox div label {display: block;}

Any suggestions on how to improve this would be appreciated. Thank you!

You can append scoped styles to the element like this:

viewof myInput = {
  const form = Inputs.checkbox([1, 2, 3], {label: "my label"});
  const scope = DOM.uid().id;
    .${scope} > div, .${scope} > div label { display: block }
  return form;

Here are some other examples of customized checkbox widgets:

Amazing! Thank you for the quick solution. I had seen the suggestion of using DOM.uid() but didn’t understand how to implement it.

I also added form.style.display = "block"; before returning the form to get the label to be above the checkboxes as well. See the forked notebook.

I recommend to instead increase the specificity of the selector:

    form.${scope}, .${scope} > div label { display: block }

Thanks. I made that change.