dcc.RadioItems

dcc.RadioItems is a component for rendering a set of radio (or option) buttons. Users can select one option from the set.
See Checklist
for selecting multiple options at a time, and
Dropdown for
a more compact view.

Examples

Find a few usage examples below.

For more examples of minimal Dash apps that use dcc.RadioItems, go to the community-driven Example Index.

Basic RadioItems

To create a basic radioitems, provide options and a value to the dcc.RadioItems component in that order.

Horizontal Options

The above example’s labels on the RadioItems are displayed vertically. Setinline=True for labels for them to be displayed horizontally:

In the example above, by setting inline=True, we configured the RadioItems to be displayed horizontally.

This property is a shorthand for setting it on the labelStyle property and is available from Dash 2.1.
The same can be done with labelStyle={'display': 'inline-block'} in earlier versions of Dash.

Options and Value

The options and value properties are the first two arguments of dcc.RadioItems. There are multiple ways to set options. The following examples define the same RadioItems component:

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

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

dcc.RadioItems(
   options=[
       {'label': 'New York City', 'value': 'New York City'},
       {'label': 'Montreal', 'value': 'Montreal'},
       {'label': 'San Francisco', 'value': 'San Francisco'},
   ],
   value='Montreal'
)

dcc.RadioItems(
   options={
        'New York City': 'New York City',
        'Montreal': 'Montreal',
        'San Francisco': 'San Francisco'
   },
   value='Montreal'
)

In these examples, the option’s label (what the user sees) and the value (what’s passed into the callback) are equivalent. Often it is helpful for these to be separate so that you can easily change the label without changing the callback logic that uses the value:

dcc.RadioItems(
   options={
        'NYC': 'New York City',
        'MTL': 'Montreal',
        'SF': 'San Francisco'
   },
   value='MTL'
)

Options provided as a single dictionary render in no particular order in the browser.
Providing a list that contains a dictionary for each option ensures the options render in the order provided.

dcc.RadioItems(
   options=[
       {'label': 'New York City', 'value': 'NYC'},
       {'label': 'Montreal', 'value': 'MTL'},
       {'label': 'San Francisco', 'value': 'SF'},
   ],
   value='MTL'
)

Note: Versions of Dash before 2.1 only support keyword arguments for options and value, and also options must be provided as a list of dictionaries.

Disable Options

Flexible Data Types

We’ve seen how options can be set using a list, a dictionary, or a list of dictionaries. options also accepts Pandas and NumPy data structures.

In this example, we use the DataFrame’s columns (df.columns) as the options.

Here, we set options with df.nation.unique(). This Pandas method returns unique values in the nation column. By passing it to options, our RadioItems component displays all unique values in that column.

Components as Option Labels

This feature is available in Dash 2.5 and later.

In previous examples, we’ve set option labels as strings. You can also use Dash components as option labels.
In this example, each label is a list of components containing an html.Img and text in an html.Span.

Styling Components as Option Labels

This feature is available in Dash 2.5 and later.

You can also style labels by using html.Div components for each label and then setting styles using the style property: