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

Hi all,

I’m using some simple radio buttons which are working fine, but i’m having trouble with the style - I’d simply like to add some spacing between the actual radio buttons and the labels, but I can only seem to add spacing margins or padding to the whole component itself:


                    {'label': 'Live chat', 'value': 'live_chat'},
                    {'label': 'Emails', 'value': 'emails'},
                    {'label': 'Phone calls', 'value': 'phone_calls'}
                labelStyle = {'display': 'block', 'cursor': 'pointer', 'margin-left':'20px'}

        style = {
            'padding-top': '20px'

Is there something within style or labelStyle i need to set, or something elsewhere? Thanks in advance!

1 Like

Have you found a solution to this? Trying to add some customisation to RadioItems but running into similar difficulties.

Haven’t found a solution yet!

The Checklist component creates a HTML structure like this:

  <input type="checkbox"/>
  Your 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.


Thank you! This is what i needed

Hi, I’m currently dealing with the same problem. Just for the sake of keeping the RadioItem without turning to Checklist. I “dribble” the issue by adding a white-space " " at the radio item labels, something like:

return [{‘label’:" "+i, ‘value’: i} for i in sorted(dff[“columns”].unique())]

It`s a very rusty solution but it worked fine for me.