Styling Radio Buttons and Checklists - Spacing between button/checkbox and label

The Checklist component creates a HTML structure like this:

<label>
  <input type="checkbox"/>
  Your label
</label>

which means that your label and the checkbox are both children of the label, and so you can’t add spacing between them using labelStyle. Instead, try adding a right margin to the input with an argument like

inputStyle={"margin-right": "20px"}

in your dcc.Checklist.

11 Likes