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.

Basic RadioItems

using Dash

app = dash()

app.layout = html_div() do
    dcc_radioitems(
        options = [
            (label = "New York City", value = "NYC"),
            (label = "Montreal", value = "MTL"),
            (label = "San Francisco", value = "SF")
        ],
        value = "MTL",
    )
end

run_server(app, "0.0.0.0", debug=true)

Horizontal Options

Change the label style to get a horizontal or vertical list. E.g. display of flex to create a vertical list, or of inline-block for horizontal.

using Dash

app = dash()

app.layout = html_div() do
    dcc_radioitems(
        options = [
            (label = "New York City", value = "NYC"),
            (label = "Montreal", value = "MTL"),
            (label = "San Francisco", value = "SF")
        ],
        value = "MTL",
        labelStyle = Dict("display" => "inline-block")
    )
end

run_server(app, "0.0.0.0", debug=true)

RadioItems Properties

Our recommended IDE for writing Dash apps is Dash Enterprise’s
Data Science Workspaces,
which has typeahead support for Dash Component Properties.
Find out if your company is using
Dash Enterprise.

options (Array of Dicts; optional):
An array of options, or inline dictionary of options.

options is an Array of Strings | Reals | Bools | Dict | Array of
Dicts with keys:

  • disabled (Bool; optional):
    If true, this option is disabled and cannot be selected.

  • label (Array of or a singular dash component, String or Real; required):
    The option’s label.

  • title (String; optional):
    The HTML ‘title’ attribute for the option. Allows for information
    on hover. For more information on this attribute, see
    https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/title.

  • value (String | Real | Bool; required):
    The value of the option. This value corresponds to the items
    specified in the value property.

value (String | Real | Bool; optional):
The currently selected value.

inline (Bool; default false):
Indicates whether the options labels should be displayed inline
(true=horizontal) or in a block (false=vertical).

style (Dict; optional):
The style of the container (div).

className (String; optional):
The class of the container (div).

inputStyle (Dict; optional):
The style of the <input> radio element.

inputClassName (String; default ''):
The class of the <input> radio element.

labelStyle (Dict; optional):
The style of the <label> that wraps the radio input and the option’s
label.

labelClassName (String; default ''):
The class of the <label> that wraps the radio input and the option’s
label.

id (String; optional):
The ID of this component, used to identify dash components in
callbacks. The ID needs to be unique across all of the components in
an app.

loading_state (Dict; optional):
Object that holds the loading state object coming from dash-renderer.

loading_state is a Dict with keys:

  • component_name (String; optional):
    Holds the name of the component that is loading.

  • is_loading (Bool; optional):
    Determines if the component is loading or not.

  • prop_name (String; optional):
    Holds which property is loading.

persistence (Bool | String | Real; optional):
Used to allow user interactions in this component to be persisted when
the component - or the page - is refreshed. If persisted is truthy
and hasn’t changed from its previous value, a value that the user
has changed while using the app will keep that change, as long as the
new value also matches what was given originally. Used in
conjunction with persistence_type.

persisted_props (Array of values equal to: ‘value’; default ['value']):
Properties whose user interactions will persist after refreshing the
component or the page. Since only value is allowed this prop can
normally be ignored.

persistence_type (a value equal to: ‘local’, ‘session’ or ‘memory’; default 'local'):
Where persisted user changes will be stored: memory: only kept in
memory, reset on page refresh. local: window.localStorage, data is
kept after the browser quit. session: window.sessionStorage, data is
cleared once the browser quit.