✊🏿 Black Lives Matter. Please consider donating to Black Girls Code today.
🐇 Announcing Dash VTK for 3d simulation graphics. Check out the March webinar.

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!

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