Component Argument Order

Dash components each have their own set of properties. html.Div, for example, has a children property for the content to be displayed in the element, an id property to reference this component in callbacks, and a title property for tooltips:

html.Div(children='Hello World', title='Hover to see this', id='my-div')

The component’s properties can be defined with keyword arguments or positional arguments. Keyword arguments are defined with the property name and an equals (=) sign. Positional arguments precede the keyword arguments and are provided without the property name and the equals (=) sign. Learn more about positional vs keyword arguments in Python

Positional arguments summary
- Omits the property keyword
- Only used for the first one or two properties
- If a component has children as a property, then children will be the first positional argument
- dcc.Dropdown, dcc.RadioItems, and dcc.Checklist have options as the first argument and value as the second
- dcc.Slider has min, max, and step as the first three arguments
- Use positional arguments to write shorter, terser code as you can omit the property name

Keyword arguments summary
- Includes the property keyword
- The property keyword makes the relationship between the component and the callback more explicit
- Use keyword arguments to write more readable code where the shorter arguments are declared above the longer arguments
- Use keyword arguments to make your code more readable to other developers who might be less familiar with the components

Default Positional Argument

If a component has children as a property, then children will be the first positional argument.

In this example with html.Div, we provide children as the first positional argument:

html.Div('Dash: A web application framework for your data.', style={
    'textAlign': 'center',
    'color': 'darkgrey'
})

You can also provide it with the children keyword:

html.Div(
    children='Dash: A web application framework for your data.',
    style={'textAlign': 'center', 'color': 'darkgrey'}
)

Keyword arguments allow you to change the order in which properties are supplied. This is equivalent:

html.Div(
    style={'textAlign': 'center', 'color': 'darkgrey'},
    children='Dash: A web application framework for your data.'
)

Rearranging the order of properties can make your code easier to read.

For example, in the code below children is supplied first but contains many lines (sometimes hundreds!). The style and id properties can get “lost” below the children property, making the code more difficult to read.

html.Div([
         # ...
         # many lines of code...
    ],
    style={'textAlign': 'center', 'color': 'darkgrey'},
    id='my-div'
)

Instead, placing the short properties above children makes the code more readable:

html.Div(
    id='my-div',
    style={'textAlign': 'center', 'color': 'darkgrey'},
    children=[
         # ...
         # many lines of code...
    ],
)

In our documentation, we’ll often include the keyword arguments to make readers aware of the properties of the component. It’s important to know the properties of Dash components as every property in a component can be the input, output, or state of a callback.

Other Default Positional Arguments

If the component doesn’t have children as a property, then the component will have a different default positional argument.

Though children is the most common positional argument for components, some components have different default positional arguments.

Dropdown, RadioItems, and Checklist

Dropdown, RadioItems, and Checklist, accept options as the first positional argument, and value as the second positional argument:

app.layout = dcc.RadioItems(
    ['New York City', 'Montreal','San Francisco'],
    'Montreal'
)

In the above example, the first argument, ['New York City', 'Montreal','San Francisco'], sets the options property on this dcc.RadioItems component. The second argument, 'Montreal', sets the value property.

As with the html.Div example above, keyword arguments can be provided if you want to make it explicit in your code which properties these refer to:

app.layout = dcc.RadioItems(
    options=['New York City', 'Montreal','San Francisco'],
    value='Montreal'
)

RangeSlider and Slider

dcc.RangeSlider and dcc.Slider accept min, max, and step as the first three positional arguments:

dcc.Slider(0, 20, 5, value=10, id='my-slider')

The same dcc.Slider with keyword arguments:

dcc.Slider(min=0, max=20, step=5, value=10, id='my-slider')

Find Default Positional Arguments

See the order that arguments can be provided to a component by either checking that component’s reference page, or accessing the documentation in a Python console (e.g. help(dcc.Dropdown)) or in your Python IDE.

When viewing the component’s reference, the properties will be listed in order. For example, here is the dcc.Dropdown reference where you can see that options and value are listed first and second respectively.