dbc_accordion(;kwargs...)
dbc_accordion(children::Any;kwargs...)
dbc_accordion(children_maker::Function;kwargs...)

An Accordion component. A self contained Accordion component. Build up the children using the AccordionItem component. Keyword arguments:

• children (a list of or a singular dash component, string or number; optional): The children of this component
• 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.

• active_item (String | Array of Strings; optional): The itemid of the currently active item. If itemid has not been specified

for the active item, this will default to item-i, where i is the index (starting from 0) of the item.

If always_open=True, this needs to be a list of string IDs.

• always_open (Bool; optional): You can make accordion items stay open when another item is opened by

using the always_open prop.

• className (String; optional): DEPRECATED Use class_name instead.

Often used with CSS to style elements with common properties.

• class_name (String; optional): Often used with CSS to style elements with common properties.
• flush (Bool; optional): Renders accordion edge-to-edge with its parent container
• key (String; optional): A unique identifier for the component, used to improve

performance by React.js while rendering components See https://reactjs.org/docs/lists-and-keys.html for more info

• loading_state (optional): Object that holds the loading state object coming from dash-renderer. loadingstate has the following type: lists containing elements 'isloading', 'propname', 'componentname'.

Those elements have the following types:

• is_loading (Bool; optional): Determines if the component is loading or not
• prop_name (String; optional): Holds which property is loading
• component_name (String; optional): Holds the name of the component that is loading
• persisted_props (Array of a value equal to: 'active_item's; optional): 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 (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.

• persistence_type (a value equal to: 'local', 'session', 'memory'; optional): 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.

• start_collapsed (Bool; optional): Set to True for all items to be collapsed initially.
• style (Dict; optional): Defines CSS styles which will override styles previously set.

dbc_accordionitem(;kwargs...)
dbc_accordionitem(children::Any;kwargs...)
dbc_accordionitem(children_maker::Function;kwargs...)

An AccordionItem component. A component to build up the children of the accordion. Keyword arguments:

• children (a list of or a singular dash component, string or number; optional): The children of this component
• 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.

• className (String; optional): DEPRECATED Use class_name instead.

Often used with CSS to style elements with common properties.

• class_name (String; optional): Often used with CSS to style elements with common properties.
• item_id (String; optional): Optional identifier for item used for determining which item is visible

if not specified, and AccordionItem is being used inside Accordion component, the itemId will be set to "item-i" where i is (zero indexed) position of item in list items pased to Accordion component.

• loading_state (optional): Object that holds the loading state object coming from dash-renderer. loadingstate has the following type: lists containing elements 'isloading', 'propname', 'componentname'.

Those elements have the following types:

• is_loading (Bool; optional): Determines if the component is loading or not
• prop_name (String; optional): Holds which property is loading
• component_name (String; optional): Holds the name of the component that is loading
• style (Dict; optional): Defines CSS styles which will override styles previously set.
• title (String; optional): The title on display in the collapsed accordion item.

dbc_alert(;kwargs...)
dbc_alert(children::Any;kwargs...)
dbc_alert(children_maker::Function;kwargs...)

An Alert component. Alert allows you to create contextual feedback messages on user actions.

Control the visibility using callbacks with the is_open prop, or set it to auto-dismiss with the duration prop. Keyword arguments:

• children (a list of or a singular dash component, string or number; optional): The children of this component.
• 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.

• className (String; optional): DEPRECATED Use class_name instead.

Often used with CSS to style elements with common properties.

• class_name (String; optional): Often used with CSS to style elements with common properties.
• color (String; optional): Alert color, options: primary, secondary, success, info, warning, danger,

link or any valid CSS color of your choice (e.g. a hex code, a decimal code or a CSS color name) Default: secondary.

• dismissable (Bool; optional): If true, add a close button that allows Alert to be dismissed.
• duration (Real; optional): Duration in milliseconds after which the Alert dismisses itself.
• fade (Bool; optional): If True, a fade animation will be applied when is_open is toggled. If

False the Alert will simply appear and disappear.

• is_open (Bool; optional): Whether alert is open. Default: True.
• key (String; optional): A unique identifier for the component, used to improve

performance by React.js while rendering components See https://reactjs.org/docs/lists-and-keys.html for more info

• loading_state (optional): Object that holds the loading state object coming from dash-renderer. loadingstate has the following type: lists containing elements 'isloading', 'propname', 'componentname'.

Those elements have the following types:

• is_loading (Bool; optional): Determines if the component is loading or not
• prop_name (String; optional): Holds which property is loading
• component_name (String; optional): Holds the name of the component that is loading
• persisted_props (Array of a value equal to: 'is_open's; optional): 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 (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.

• persistence_type (a value equal to: 'local', 'session', 'memory'; optional): 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.

• style (Dict; optional): Defines CSS styles which will override styles previously set.

dbc_badge(;kwargs...)
dbc_badge(children::Any;kwargs...)
dbc_badge(children_maker::Function;kwargs...)

A Badge component. Badges can be used to add counts or labels to other components. Keyword arguments:

• children (a list of or a singular dash component, string or number; optional): The children of this component.
• 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.

• className (String; optional): DEPRECATED Use class_name instead.

Often used with CSS to style elements with common properties.

• class_name (String; optional): Often used with CSS to style elements with common properties.
• color (String; optional): Badge color, options: primary, secondary, success, info, warning, danger,

link or any valid CSS color of your choice (e.g. a hex code, a decimal code or a CSS color name) Default: secondary.

• external_link (Bool; optional): If true, the browser will treat this as an external link,

forcing a page refresh at the new location. If false, this just changes the location without triggering a page refresh. Use this if you are observing dcc.Location, for instance. Defaults to true for absolute URLs and false otherwise.

• href (String; optional): Attach link to badge.
• key (String; optional): A unique identifier for the component, used to improve

performance by React.js while rendering components See https://reactjs.org/docs/lists-and-keys.html for more info

• loading_state (optional): Object that holds the loading state object coming from dash-renderer. loadingstate has the following type: lists containing elements 'isloading', 'propname', 'componentname'.

Those elements have the following types:

• is_loading (Bool; optional): Determines if the component is loading or not
• prop_name (String; optional): Holds which property is loading
• component_name (String; optional): Holds the name of the component that is loading
• n_clicks (Real; optional): An integer that represents the number of times

that this element has been clicked on.

• n_clicks_timestamp (Real; optional): An integer that represents the time (in ms since 1970)

at which n_clicks changed. This can be used to tell which button was changed most recently.

• pill (Bool; optional): Make badge "pill" shaped (rounded ends, like a pill). Default: False.
• style (Dict; optional): Defines CSS styles which will override styles previously set.
• tag (String; optional): HTML tag to use for the Badge. Default: span.
• target (String; optional): Target attribute to pass on to the link. Only applies to external links.
• text_color (String; optional): Badge color, options: primary, secondary, success, info, warning, danger,

link or any valid CSS color of your choice (e.g. a hex code, a decimal code or a CSS color name) Default: secondary.

• title (String; optional): Sets the title attribute of the underlying HTML button.

dbc_breadcrumb(;kwargs...)

A Breadcrumb component. Use breadcrumbs to create a navigation breadcrumb in your app. Keyword arguments:

• 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.

• className (String; optional): DEPRECATED - Use class_name instead.

Often used with CSS to style elements with common properties.

• class_name (String; optional): Often used with CSS to style elements with common properties.
• itemClassName (String; optional): DEPRECATED - use itemclassname instead.

Class name ot apply to each item.

• item_class_name (String; optional): Class name to apply to each item.
• item_style (Dict; optional): Defines inline CSS styles that will be added to each item in the

breadcrumbs.

• items (optional): The details of the items to render inside of this component.. items has the following type: Array of lists containing elements 'label', 'href', 'active', 'external_link', 'target', 'title'.

Those elements have the following types:

• label (String; optional): Label to display inside the breadcrumbs.
• href (String; optional): URL of the resource to link to
• active (Bool; optional): Apply 'active' style to this component.
• external_link (Bool; optional): If true, the browser will treat this as an external link, forcing a

page refresh at the new location. If false, this just changes the location without triggering a page refresh. Use this if you are observing dcc.Location, for instance. Defaults to true for absolute URLs and false otherwise.

• target (String; optional): Target attribute to pass on to the link. Only applies to external links.
• title (String; optional): title attribute for the inner a elements
• key (String; optional): A unique identifier for the component, used to improve

performance by React.js while rendering components See https://reactjs.org/docs/lists-and-keys.html for more info

• loading_state (optional): Object that holds the loading state object coming from dash-renderer. loadingstate has the following type: lists containing elements 'isloading', 'propname', 'componentname'.

Those elements have the following types:

• is_loading (Bool; optional): Determines if the component is loading or not
• prop_name (String; optional): Holds which property is loading
• component_name (String; optional): Holds the name of the component that is loading
• style (Dict; optional): Defines CSS styles which will override styles previously set.
• tag (Dict; optional): HTML tag to use for the outer breadcrumb component. Default: "nav".

dbc_button(;kwargs...)
dbc_button(children::Any;kwargs...)
dbc_button(children_maker::Function;kwargs...)

A Button component. A component for creating Bootstrap buttons with different style options. The Button component can act as a HTML button, link (<a>) or can be used like a dashcorecomponents style Link for navigating between pages of a Dash app.

Use the n_clicks prop to trigger callbacks when the button has been clicked. Keyword arguments:

• children (a list of or a singular dash component, string or number; optional): The children of this component.
• 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.

• active (Bool; optional): Whether button is in active state. Default: False.
• className (String; optional): DEPRECATED Use class_name instead.

Often used with CSS to style elements with common properties.

• class_name (String; optional): Often used with CSS to style elements with common properties.
• color (String; optional): Button color, options: primary, secondary, success, info, warning, danger,

link. Default: primary.

• disabled (Bool; optional): Disable button (make unclickable). Default: False.
• download (String; optional): Indicates that the hyperlink is to be used for downloading a resource.
• external_link (Bool; optional): If true, the browser will treat this as an external link,

forcing a page refresh at the new location. If false, this just changes the location without triggering a page refresh. Use this if you are observing dcc.Location, for instance. Defaults to true for absolute URLs and false otherwise.

• href (String; optional): Pass a URL (relative or absolute) to make the menu entry a link.
• key (String; optional): A unique identifier for the component, used to improve

performance by React.js while rendering components See https://reactjs.org/docs/lists-and-keys.html for more info

• loading_state (optional): Object that holds the loading state object coming from dash-renderer. loadingstate has the following type: lists containing elements 'isloading', 'propname', 'componentname'.

Those elements have the following types:

• is_loading (Bool; optional): Determines if the component is loading or not
• prop_name (String; optional): Holds which property is loading
• component_name (String; optional): Holds the name of the component that is loading
• n_clicks (Real; optional): An integer that represents the number of times

that this element has been clicked on.

• n_clicks_timestamp (Real; optional): Use of *timestamp props has been deprecated in Dash in favour of dash.callbackcontext.

See "How do I determine which Input has changed?" in the Dash FAQs https://dash.plot.ly/faqs.

An integer that represents the time (in ms since 1970) at which n_clicks changed. This can be used to tell which button was changed most recently.

• name (String; optional): The name of the button, submitted as a pair with the button’s value as part

of the form data.

• outline (Bool; optional): Set outline button style, which removes background images and colors for a

lightweight style.

• rel (String; optional): Set the rel attribute when Button is being used as a Link.
• size (String; optional): Button size, options: 'lg', 'md', 'sm'.
• style (Dict; optional): Defines CSS styles which will override styles previously set.
• target (String; optional): Target attribute to pass on to link if using Button as an external link.
• title (String; optional): Sets the title attribute of the underlying HTML button.
• type (a value equal to: 'button', 'reset', 'submit'; optional): The default behavior of the button. Possible values are: "button", "reset",

"submit". If left unspecified the default depends on usage: for buttons associated with a form (e.g. a dbc.Button inside a dbc.Form) the default is "submit". Otherwise the default is "button".

• value (String; optional): Defines the value associated with the button’s name when it’s submitted

with the form data. This value is passed to the server in params when the form is submitted.

dbc_buttongroup(;kwargs...)
dbc_buttongroup(children::Any;kwargs...)
dbc_buttongroup(children_maker::Function;kwargs...)

A ButtonGroup component. A component for creating groups of buttons. Can be used with Button or DropdownMenu. Keyword arguments:

• children (a list of or a singular dash component, string or number; optional): The children of this component
• 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.

• className (String; optional): DEPRECATED Use class_name instead.

Often used with CSS to style elements with common properties.

• class_name (String; optional): Often used with CSS to style elements with common properties.
• key (String; optional): A unique identifier for the component, used to improve

performance by React.js while rendering components See https://reactjs.org/docs/lists-and-keys.html for more info

• loading_state (optional): Object that holds the loading state object coming from dash-renderer. loadingstate has the following type: lists containing elements 'isloading', 'propname', 'componentname'.

Those elements have the following types:

• is_loading (Bool; optional): Determines if the component is loading or not
• prop_name (String; optional): Holds which property is loading
• component_name (String; optional): Holds the name of the component that is loading
• size (String; optional): Size of button group, options: 'sm', 'md', 'lg'.
• style (Dict; optional): Defines CSS styles which will override styles previously set.
• vertical (Bool; optional): Group buttons vertically.

dbc_card(;kwargs...)
dbc_card(children::Any;kwargs...)
dbc_card(children_maker::Function;kwargs...)

A Card component. Component for creating Bootstrap cards. Use in conjunction with CardBody, CardImg, CardLink, CardHeader and CardFooter. Can also be used in conjunction with CardColumns, CardDeck, CardGroup for different layout options. Keyword arguments:

• children (a list of or a singular dash component, string or number; optional): The children of this component
• 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.

• body (Bool; optional): Apply the card-body class to the card, so that there is no need to also

include a CardBody component in the children of this Card. Default: False

• className (String; optional): DEPRECATED Use class_name instead.

Often used with CSS to style elements with common properties.

• class_name (String; optional): Often used with CSS to style elements with common properties.
• color (String; optional): Card color, options: primary, secondary, success, info, warning, danger,

light, dark or any valid CSS color of your choice (e.g. a hex code, a decimal code or a CSS color name). Default is light.

• inverse (Bool; optional): Invert text colours for use with a darker background.
• key (String; optional): A unique identifier for the component, used to improve

performance by React.js while rendering components See https://reactjs.org/docs/lists-and-keys.html for more info

• loading_state (optional): Object that holds the loading state object coming from dash-renderer. loadingstate has the following type: lists containing elements 'isloading', 'propname', 'componentname'.

Those elements have the following types:

• is_loading (Bool; optional): Determines if the component is loading or not
• prop_name (String; optional): Holds which property is loading
• component_name (String; optional): Holds the name of the component that is loading
• outline (Bool; optional): Apply color styling to just the border of the card.
• style (Dict; optional): Defines CSS styles which will override styles previously set.

dbc_cardbody(;kwargs...)
dbc_cardbody(children::Any;kwargs...)
dbc_cardbody(children_maker::Function;kwargs...)

A CardBody component. Wrap the content of your Card in CardBody to apply padding and other styles. Keyword arguments:

• children (a list of or a singular dash component, string or number; optional): The children of this component
• 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.

• className (String; optional): DEPRECATED Use class_name instead.

Often used with CSS to style elements with common properties.

• class_name (String; optional): Often used with CSS to style elements with common properties.
• key (String; optional): A unique identifier for the component, used to improve

performance by React.js while rendering components See https://reactjs.org/docs/lists-and-keys.html for more info

• loading_state (optional): Object that holds the loading state object coming from dash-renderer. loadingstate has the following type: lists containing elements 'isloading', 'propname', 'componentname'.

Those elements have the following types:

• is_loading (Bool; optional): Determines if the component is loading or not
• prop_name (String; optional): Holds which property is loading
• component_name (String; optional): Holds the name of the component that is loading
• style (Dict; optional): Defines CSS styles which will override styles previously set.
• tag (String; optional): HTML tag to use for the card body, default: div

dbc_cardfooter(;kwargs...)
dbc_cardfooter(children::Any;kwargs...)
dbc_cardfooter(children_maker::Function;kwargs...)

A CardFooter component. Use the CardFooter component to add a footer to any card. Keyword arguments:

• children (a list of or a singular dash component, string or number; optional): The children of this component
• 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.

• className (String; optional): DEPRECATED Use class_name instead.

Often used with CSS to style elements with common properties.

• class_name (String; optional): Often used with CSS to style elements with common properties.
• key (String; optional): A unique identifier for the component, used to improve

performance by React.js while rendering components See https://reactjs.org/docs/lists-and-keys.html for more info

• loading_state (optional): Object that holds the loading state object coming from dash-renderer. loadingstate has the following type: lists containing elements 'isloading', 'propname', 'componentname'.

Those elements have the following types:

• is_loading (Bool; optional): Determines if the component is loading or not
• prop_name (String; optional): Holds which property is loading
• component_name (String; optional): Holds the name of the component that is loading
• style (Dict; optional): Defines CSS styles which will override styles previously set.
• tag (String; optional): HTML tag to use for the card footer, default: div

dbc_cardgroup(;kwargs...)
dbc_cardgroup(children::Any;kwargs...)
dbc_cardgroup(children_maker::Function;kwargs...)

A CardGroup component. Use CardGroup to render cards as a single, attached element of columns with equal width and height. Keyword arguments:

• children (a list of or a singular dash component, string or number; optional): The children of this component
• 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.

• className (String; optional): DEPRECATED Use class_name instead.

Often used with CSS to style elements with common properties.

• class_name (String; optional): Often used with CSS to style elements with common properties.
• key (String; optional): A unique identifier for the component, used to improve

performance by React.js while rendering components See https://reactjs.org/docs/lists-and-keys.html for more info

• loading_state (optional): Object that holds the loading state object coming from dash-renderer. loadingstate has the following type: lists containing elements 'isloading', 'propname', 'componentname'.

Those elements have the following types:

• is_loading (Bool; optional): Determines if the component is loading or not
• prop_name (String; optional): Holds which property is loading
• component_name (String; optional): Holds the name of the component that is loading
• style (Dict; optional): Defines CSS styles which will override styles previously set.
• tag (String; optional): HTML tag to use for the card group, default: div

dbc_cardheader(;kwargs...)
dbc_cardheader(children::Any;kwargs...)
dbc_cardheader(children_maker::Function;kwargs...)

A CardHeader component. Use the CardHeader component to add a header to any card. Keyword arguments:

• children (a list of or a singular dash component, string or number; optional): The children of this component
• 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.

• className (String; optional): DEPRECATED Use class_name instead.

Often used with CSS to style elements with common properties.

• class_name (String; optional): Often used with CSS to style elements with common properties.
• key (String; optional): A unique identifier for the component, used to improve

performance by React.js while rendering components See https://reactjs.org/docs/lists-and-keys.html for more info

• loading_state (optional): Object that holds the loading state object coming from dash-renderer. loadingstate has the following type: lists containing elements 'isloading', 'propname', 'componentname'.

Those elements have the following types:

• is_loading (Bool; optional): Determines if the component is loading or not
• prop_name (String; optional): Holds which property is loading
• component_name (String; optional): Holds the name of the component that is loading
• style (Dict; optional): Defines CSS styles which will override styles previously set.
• tag (String; optional): HTML tag to use for the card header, default: div

dbc_cardimg(;kwargs...)
dbc_cardimg(children::Any;kwargs...)
dbc_cardimg(children_maker::Function;kwargs...)

A CardImg component. Use CardImg to add images to your cards. Keyword arguments:

• children (a list of or a singular dash component, string or number; optional): The children of this component
• 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.

• alt (String; optional): Alternative text in case an image can't be displayed.
• bottom (Bool; optional): Set to True if image is at bottom of card. This will apply the

card-img-bottom class which rounds the bottom corners to match the corners of the card.

• className (String; optional): DEPRECATED Use class_name instead.

Often used with CSS to style elements with common properties.

• class_name (String; optional): Often used with CSS to style elements with common properties.
• key (String; optional): A unique identifier for the component, used to improve

performance by React.js while rendering components See https://reactjs.org/docs/lists-and-keys.html for more info

• loading_state (optional): Object that holds the loading state object coming from dash-renderer. loadingstate has the following type: lists containing elements 'isloading', 'propname', 'componentname'.

Those elements have the following types:

• is_loading (Bool; optional): Determines if the component is loading or not
• prop_name (String; optional): Holds which property is loading
• component_name (String; optional): Holds the name of the component that is loading
• src (String; optional): The URI of the embeddable content.
• style (Dict; optional): Defines CSS styles which will override styles previously set.
• tag (String; optional): HTML tag to use for the card body, default: div
• title (String; optional): Text to be displayed as a tooltip when hovering
• top (Bool; optional): Set to True if image is at top of card. This will apply the card-img-top

class which rounds the top corners to match the corners of the card.

dbc_cardimgoverlay(;kwargs...)
dbc_cardimgoverlay(children::Any;kwargs...)
dbc_cardimgoverlay(children_maker::Function;kwargs...)

A CardImgOverlay component. Use CardImgOverlay to turn an image into the background of your card and add text on top of it. Keyword arguments:

• children (a list of or a singular dash component, string or number; optional): The children of this component
• 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.

• className (String; optional): DEPRECATED Use class_name instead.

Often used with CSS to style elements with common properties.

• class_name (String; optional): Often used with CSS to style elements with common properties.
• key (String; optional): A unique identifier for the component, used to improve

performance by React.js while rendering components See https://reactjs.org/docs/lists-and-keys.html for more info

• loading_state (optional): Object that holds the loading state object coming from dash-renderer. loadingstate has the following type: lists containing elements 'isloading', 'propname', 'componentname'.

Those elements have the following types:

• is_loading (Bool; optional): Determines if the component is loading or not
• prop_name (String; optional): Holds which property is loading
• component_name (String; optional): Holds the name of the component that is loading
• style (Dict; optional): Defines CSS styles which will override styles previously set.
• tag (String; optional): HTML tag to use for the card image overlay, default: div

dbc_cardlink(;kwargs...)
dbc_cardlink(children::Any;kwargs...)
dbc_cardlink(children_maker::Function;kwargs...)

A CardLink component. Use card link to add consistently styled links to your cards. Links can be used like buttons, external links, or internal Dash style links. Keyword arguments:

• children (a list of or a singular dash component, string or number; optional): The children of this component
• 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.

• className (String; optional): DEPRECATED Use class_name instead.

Often used with CSS to style elements with common properties.

• class_name (String; optional): Often used with CSS to style elements with common properties.
• external_link (Bool; optional): If true, the browser will treat this as an external link,

forcing a page refresh at the new location. If false, this just changes the location without triggering a page refresh. Use this if you are observing dcc.Location, for instance. Defaults to true for absolute URLs and false otherwise.

• href (String; optional): URL of the resource to link to
• key (String; optional): A unique identifier for the component, used to improve

performance by React.js while rendering components See https://reactjs.org/docs/lists-and-keys.html for more info

• loading_state (optional): Object that holds the loading state object coming from dash-renderer. loadingstate has the following type: lists containing elements 'isloading', 'propname', 'componentname'.

Those elements have the following types:

• is_loading (Bool; optional): Determines if the component is loading or not
• prop_name (String; optional): Holds which property is loading
• component_name (String; optional): Holds the name of the component that is loading
• n_clicks (Real; optional): An integer that represents the number of times

that this element has been clicked on.

• n_clicks_timestamp (Real; optional): An integer that represents the time (in ms since 1970)

at which n_clicks changed. This can be used to tell which button was changed most recently.

• style (Dict; optional): Defines CSS styles which will override styles previously set.
• target (String; optional): Target attribute to pass on to the link. Only applies to external links.

dbc_carousel(;kwargs...)

A Carousel component. Component for creating Bootstrap carousel. This component is a slideshow for cycling through a series of content. Keyword arguments:

• id (String; optional): The ID of the component, used to identify dash components

in callbacks. The ID needs to be unique across all of the components in an app.

• active_index (Real; optional): The current visible slide number
• className (String; optional): DEPRECATED Use class_name instead.

efines the className of the carousel container. Often used with CSS to style elements with common properties.

• class_name (String; optional): Defines the className of the carousel container. Often used with CSS to style elements with common properties.
• controls (Bool; optional): Show the Carousel previous and next arrows for changing the current slide
• indicators (Bool; optional): Show a set of slide position indicators
• interval (Real; optional): the interval at which the carousel automatically cycles (default: 5000)

If set to None, carousel will not Autoplay (i.e. will not automatically cycle).

• items (required): The items to display on the slides in the carousel. items has the following type: Array of lists containing elements 'key', 'src', 'alt', 'imgclassname', 'imgClassName', 'imgstyle', 'header', 'caption', 'captionclass_name', 'captionClassName'.

Those elements have the following types:

• key (String; optional): A unique identifier for the slide, used to improve performance by React.js while rendering components

See https://reactjs.org/docs/lists-and-keys.html for more info.

• src (String; optional): The URL of the image
• alt (String; optional): The alternate text for an image, if the image cannot be displayed
• img_class_name (String; optional): The className for the image. The default is 'd-block w-100'
• imgClassName (String; optional): DEPRECATED Use img_class_name instead.

The className for the image. The default is 'd-block w-100'

• img_style (Dict; optional): The style for the image
• header (String; optional): The header of the text on the slide. It is displayed in a <h5> element
• caption (String; optional): The caption of the item. The text is displayed in a <p> element
• caption_class_name (String; optional): The class name for the header and caption container
• captionClassName (String; optional): DEPRECATED Use caption_class_name instead.

The class name for the header and caption containers

• loading_state (optional): Object that holds the loading state object coming from dash-renderer. loadingstate has the following type: lists containing elements 'isloading', 'propname', 'componentname'.

Those elements have the following types:

• is_loading (Bool; optional): Determines if the component is loading or not
• prop_name (String; optional): Holds which property is loading
• component_name (String; optional): Holds the name of the component that is loading
• persisted_props (Array of a value equal to: 'active_index's; optional): 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 (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.

• persistence_type (a value equal to: 'local', 'session', 'memory'; optional): 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.

• ride (a value equal to: 'carousel'; optional): Autoplays the carousel after the user manually cycles the first item. If "carousel", autoplays the carousel on load.
• slide (Bool; optional): controls whether the slide animation on the Carousel works or not
• style (Dict; optional): Defines CSS styles of the carousel container. Will override styles previously set.
• variant (a value equal to: 'dark'; optional): Add variant="dark" to the Carousel for darker controls, indicators, and

captions.

dbc_checkbox(;kwargs...)

A Checkbox component. Checklist is a component that encapsulates several checkboxes. The values and labels of the checklist is specified in the options property and the checked items are specified with the value property. Each checkbox is rendered as an input / label pair. Checklist must be given an id to work properly. Keyword arguments:

• 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.

• className (String; optional): DEPRECATED Use class_name instead.

The class of the container (div)

• class_name (String; optional): The class of the container (div)
• disabled (Bool; optional): Disable the Checkbox.
• inputClassName (String; optional): DEPRECATED Use input_class_name instead.

The class of the <input> checkbox element

• inputStyle (Dict; optional): DEPRECATED Use input_style instead.

The style of the <input> checkbox element.

• input_class_name (String; optional): The class of the <input> checkbox element
• input_style (Dict; optional): The style of the <input> checkbox element.
• label (a list of or a singular dash component, string or number; optional): The label of the <input> element
• labelClassName (String; optional): DEPRECATED Use label_class_name instead.

CSS classes to apply to the <label> element for each item.

• labelStyle (Dict; optional): DEPRECATED Use label_style instead.

Inline style arguments to apply to the <label> element for each item.

• label_class_name (String; optional): CSS classes to apply to the <label> element for each item.
• label_id (String; optional): The id of the label
• label_style (Dict; optional): Inline style arguments to apply to the <label> element for each item.
• loading_state (optional): Object that holds the loading state object coming from dash-renderer. loadingstate has the following type: lists containing elements 'isloading', 'propname', 'componentname'.

Those elements have the following types:

• is_loading (Bool; optional): Determines if the component is loading or not
• prop_name (String; optional): Holds which property is loading
• component_name (String; optional): Holds the name of the component that is loading
• name (String; optional): The name of the control, which is submitted with the form data.
• persisted_props (Array of a value equal to: 'value's; optional): 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 (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.

• persistence_type (a value equal to: 'local', 'session', 'memory'; optional): 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.

• style (Dict; optional): The style of the container (div)
• value (Bool; optional): The value of the input.

dbc_checklist(;kwargs...)

A Checklist component. Checklist is a component that encapsulates several checkboxes. The values and labels of the checklist is specified in the options property and the checked items are specified with the value property. Each checkbox is rendered as an input / label pair. Checklist must be given an id to work properly. Keyword arguments:

• 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.

• className (String; optional): DEPRECATED Use class_name instead.

The class of the container (div)

• class_name (String; optional): The class of the container (div)
• inline (Bool; optional): Arrange Checklist inline
• inputCheckedClassName (String; optional): DEPRECATED Use input_checked_class_name instead.

Additional CSS classes to apply to the <input> element when the corresponding checkbox is checked.

• inputCheckedStyle (Dict; optional): DEPRECATED Use input_checked_style instead.

Additional inline style arguments to apply to <input> elements on checked items.

• inputClassName (String; optional): DEPRECATED Use input_class_name instead.

The class of the <input> checkbox element

• inputStyle (Dict; optional): DEPRECATED Use input_style instead.

The style of the <input> checkbox element.

• input_checked_class_name (String; optional): Additional CSS classes to apply to the <input> element when the

corresponding checkbox is checked.

• input_checked_style (Dict; optional): Additional inline style arguments to apply to <input> elements on checked

items.

• input_class_name (String; optional): The class of the <input> checkbox element
• input_style (Dict; optional): The style of the <input> checkbox element.
• key (String; optional): A unique identifier for the component, used to improve

performance by React.js while rendering components See https://reactjs.org/docs/lists-and-keys.html for more info

• labelCheckedClassName (String; optional): DEPRECATED Use label_checked_class_name instead.

Additional CSS classes to apply to the <label> element when the corresponding checkbox is checked.

• labelCheckedStyle (Dict; optional): DEPRECATED Use label_checked_style instead.

Additional inline style arguments to apply to <label> elements on checked items.

• labelClassName (String; optional): DEPRECATED Use label_class_name instead.

CSS classes to apply to the <label> element for each item.

• labelStyle (Dict; optional): DEPRECATED Use label_style instead.

Inline style arguments to apply to the <label> element for each item.

• label_checked_class_name (String; optional): Additional CSS classes to apply to the <label> element when the

corresponding checkbox is checked.

• label_checked_style (Dict; optional): Additional inline style arguments to apply to <label> elements on checked

items.

• label_class_name (String; optional): CSS classes to apply to the <label> element for each item.
• label_style (Dict; optional): Inline style arguments to apply to the <label> element for each item.
• loading_state (optional): Object that holds the loading state object coming from dash-renderer. loadingstate has the following type: lists containing elements 'isloading', 'propname', 'componentname'.

Those elements have the following types:

• is_loading (Bool; optional): Determines if the component is loading or not
• prop_name (String; optional): Holds which property is loading
• component_name (String; optional): Holds the name of the component that is loading
• name (String; optional): The name of the control, which is submitted with the form data.
• options (optional): The options to display as items in the component. This can be an array

or a dictionary as follows:

1. Array of options where the label and the value are the same thing -

[string|number]

1. An array of options

{
  "label": [string|number],
  "value": [string|number],
  "disabled": [bool] (Optional),
  "input_id": [string] (Optional),
  "label_id": [string] (Optional)
}

1. Simpler options representation in dictionary format. The order is not

guaranteed. All values and labels will be treated as strings.

{"value1": "label1", "value2": "label2", ... }

which is equal to

[
  {"label": "label1", "value": "value1"},
  {"label": "label2", "value": "value2"}, ...
]

. options has the following type: Array of String | Reals | Dict | Array of lists containing elements 'label', 'value', 'disabled', 'inputid', 'labelid'. Those elements have the following types:

• label (a list of or a singular dash component, string or number; required): The checkbox's label
• value (String | Real; required): The value of the checkbox. This value corresponds to the items

specified in the value property.

• disabled (Bool; optional): If true, this checkbox is disabled and can't be clicked on.
• input_id (String; optional): id for this option's input, can be used to attach tooltips or apply

CSS styles

• label_id (String; optional): id for this option's label, can be used to attach tooltips or apply

CSS styless

• persisted_props (Array of a value equal to: 'value's; optional): 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 (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.

• persistence_type (a value equal to: 'local', 'session', 'memory'; optional): 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.

• style (Dict; optional): The style of the container (div)
• switch (Bool; optional): Set to True to render toggle-like switches instead of checkboxes.
• value (Array of String | Reals; optional): The currently selected value

dbc_col(;kwargs...)
dbc_col(children::Any;kwargs...)
dbc_col(children_maker::Function;kwargs...)

A Col component. Component for creating Bootstrap columns to control the layout of your page.

Use the width argument to specify width, or use the breakpoint arguments (xs, sm, md, lg, xl) to control the width of the columns on different screen sizes to achieve a responsive layout. Keyword arguments:

• children (a list of or a singular dash component, string or number; optional): The children of this component
• 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.

• align (a value equal to: 'start', 'center', 'end', 'stretch', 'baseline'; optional): Set vertical alignment of this column's content in the parent row. Options

are 'start', 'center', 'end', 'stretch', 'baseline'.

• className (String; optional): DEPRECATED Use class_name instead.

Often used with CSS to style elements with common properties.

• class_name (String; optional): Often used with CSS to style elements with common properties.
• key (String; optional): A unique identifier for the component, used to improve

performance by React.js while rendering components See https://reactjs.org/docs/lists-and-keys.html for more info

• lg (optional): Specify column behaviour on a large screen.

Valid arguments are boolean, an integer in the range 1-12 inclusive, or a dictionary with keys 'offset', 'order', 'size'. See the documentation for more details.

• loading_state (optional): Object that holds the loading state object coming from dash-renderer. loadingstate has the following type: lists containing elements 'isloading', 'propname', 'componentname'.

Those elements have the following types:

• is_loading (Bool; optional): Determines if the component is loading or not
• prop_name (String; optional): Holds which property is loading
• component_name (String; optional): Holds the name of the component that is loading
• md (optional): Specify column behaviour on a medium screen.

Valid arguments are boolean, an integer in the range 1-12 inclusive, or a dictionary with keys 'offset', 'order', 'size'. See the documentation for more details.

• sm (optional): Specify column behaviour on a small screen.

Valid arguments are boolean, an integer in the range 1-12 inclusive, or a dictionary with keys 'offset', 'order', 'size'. See the documentation for more details.

• style (Dict; optional): Defines CSS styles which will override styles previously set.
• width (optional): Specify the width of the column. Behind the scenes this sets behaviour at

the xs breakpoint, and will be overriden if xs is specified.

Valid arguments are boolean, an integer in the range 1-12 inclusive, or a dictionary with keys 'offset', 'order', 'size'. See the documentation for more details.

• xl (optional): Specify column behaviour on an extra large screen.

Valid arguments are boolean, an integer in the range 1-12 inclusive, or a dictionary with keys 'offset', 'order', 'size'. See the documentation for more details.

• xs (optional): Specify column behaviour on an extra small screen.

Valid arguments are boolean, an integer in the range 1-12 inclusive, or a dictionary with keys 'offset', 'order', 'size'. See the documentation for more details.

• xxl (optional): Specify column behaviour on an extra extra large screen.

Valid arguments are boolean, an integer in the range 1-12 inclusive, or a dictionary with keys 'offset', 'order', 'size'. See the documentation for more details.

dbc_collapse(;kwargs...)
dbc_collapse(children::Any;kwargs...)
dbc_collapse(children_maker::Function;kwargs...)

A Collapse component. Hide or show content with a vertical collapsing animation. Visibility of the children is controlled by the is_open prop which can be targetted by callbacks. Keyword arguments:

• children (a list of or a singular dash component, string or number; optional): The children of this component.
• 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.

• className (String; optional): DEPRECATED Use class_name instead.

Often used with CSS to style elements with common properties.

• class_name (String; optional): Often used with CSS to style elements with common properties.
• dimension (a value equal to: 'height', 'width'; optional): The dimension used when collapsing e.g. height will collapse vertically,

whilst width will collapse horizontally

• is_open (Bool; optional): Whether collapse is currently open.
• key (String; optional): A unique identifier for the component, used to improve

performance by React.js while rendering components See https://reactjs.org/docs/lists-and-keys.html for more info

• loading_state (optional): Object that holds the loading state object coming from dash-renderer. loadingstate has the following type: lists containing elements 'isloading', 'propname', 'componentname'.

Those elements have the following types:

• is_loading (Bool; optional): Determines if the component is loading or not
• prop_name (String; optional): Holds which property is loading
• component_name (String; optional): Holds the name of the component that is loading
• navbar (Bool; optional): Set to True when using a collapse inside a navbar.
• style (Dict; optional): Defines CSS styles which will override styles previously set.

dbc_container(;kwargs...)
dbc_container(children::Any;kwargs...)
dbc_container(children_maker::Function;kwargs...)

A Container component. Containers provide a means to center and horizontally pad your site’s contents. Keyword arguments:

• children (a list of or a singular dash component, string or number; optional): The children of this component
• 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.

• className (String; optional): DEPRECATED Use class_name instead.

Often used with CSS to style elements with common properties.

• class_name (String; optional): Often used with CSS to style elements with common properties.
• fluid (Bool | String; optional): If True the container-fluid class will be applied, and the Container will

expand to fill available space. A non-fluid container resizes responsively to a fixed width at the different breakpoints.

You can also set the fluid property to one of the Bootstrap breakpoints: "sm", "md", "lg", "xl" or "xxl", so that the container fluidly expands to fill the screen until the specified breakpoint, then resize responsively at higher breakpoints.

• key (String; optional): A unique identifier for the component, used to improve

performance by React.js while rendering components See https://reactjs.org/docs/lists-and-keys.html for more info

• loading_state (optional): Object that holds the loading state object coming from dash-renderer. loadingstate has the following type: lists containing elements 'isloading', 'propname', 'componentname'.

Those elements have the following types:

• is_loading (Bool; optional): Determines if the component is loading or not
• prop_name (String; optional): Holds which property is loading
• component_name (String; optional): Holds the name of the component that is loading
• style (Dict; optional): Defines CSS styles which will override styles previously set.
• tag (String; optional): HTML tag to apply the container class to, default: div

dbc_dropdownmenu(;kwargs...)
dbc_dropdownmenu(children::Any;kwargs...)
dbc_dropdownmenu(children_maker::Function;kwargs...)

A DropdownMenu component. DropdownMenu creates an overlay useful for grouping together links and other content to organise navigation or other interactive elements. Keyword arguments:

• children (a list of or a singular dash component, string or number; optional): The children of this component.
• 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.

• addon_type (Bool | a value equal to: 'prepend', 'append'; optional): Set this to 'prepend' or 'append' if the DropdownMenu is being used in an input group.
• align_end (Bool; optional): Align the DropdownMenu along the right side of its parent. Default: False.
• caret (Bool; optional): Add a caret to the DropdownMenu toggle. Default: True.
• className (String; optional): DEPRECATED Use class_name instead.

Often used with CSS to style elements with common properties.

• class_name (String; optional): Often used with CSS to style elements with common properties.
• color (String; optional): Set the color of the DropdownMenu toggle. Available options are: 'primary',

'secondary', 'success', 'warning', 'danger', 'info', 'link' or any valid CSS color of your choice (e.g. a hex code, a decimal code or a CSS color name) Default: 'primary'

• direction (a value equal to: 'down', 'start', 'end', 'up', 'left', 'right', 'end'; optional): Direction in which to expand the DropdownMenu. Default: 'down'. left

and right have been deprecated, and start and end should be used instead.

• disabled (Bool; optional): Disable the dropdown.
• group (Bool; optional): Set group to True if the DropdownMenu is inside a ButtonGroup.
• in_navbar (Bool; optional): Set this to True if the DropdownMenu is inside a navbar. Default: False.
• key (String; optional): A unique identifier for the component, used to improve

performance by React.js while rendering components See https://reactjs.org/docs/lists-and-keys.html for more info

• label (a list of or a singular dash component, string or number; optional): Label for the DropdownMenu toggle.
• loading_state (optional): Object that holds the loading state object coming from dash-renderer. loadingstate has the following type: lists containing elements 'isloading', 'propname', 'componentname'.

Those elements have the following types:

• is_loading (Bool; optional): Determines if the component is loading or not
• prop_name (String; optional): Holds which property is loading
• component_name (String; optional): Holds the name of the component that is loading
• menu_variant (a value equal to: 'light', 'dark'; optional): Set menu_variant="dark" to create a dark-mode drop down instead
• nav (Bool; optional): Set this to True if the DropdownMenu is inside a nav for styling consistent

with other nav items. Default: False.

• right (Bool; optional): DEPRECATED Use align_end instead.

Align the DropdownMenu along the right side of its parent. Default: False.

• size (a value equal to: 'sm', 'md', 'lg'; optional): Size of the DropdownMenu. 'sm' corresponds to small, 'md' to medium

and 'lg' to large.

• style (Dict; optional): Defines CSS styles which will override styles previously set.
• toggleClassName (String; optional): DEPRECATED Use toggle_class_name instead.

Often used with CSS to style elements with common properties. The classes specified with this prop will be applied to the DropdownMenu toggle.

• toggle_class_name (String; optional): Often used with CSS to style elements with common properties. The classes

specified with this prop will be applied to the DropdownMenu toggle.

• toggle_style (Dict; optional): Defines CSS styles which will override styles previously set. The styles

set here apply to the DropdownMenu toggle.

dbc_dropdownmenuitem(;kwargs...)
dbc_dropdownmenuitem(children::Any;kwargs...)
dbc_dropdownmenuitem(children_maker::Function;kwargs...)

A DropdownMenuItem component. Use DropdownMenuItem to build up the content of a DropdownMenu. Keyword arguments:

• children (a list of or a singular dash component, string or number; optional): The children of this component.
• 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.

• active (Bool; optional): Style this item as 'active'.
• className (String; optional): DEPRECATED Use class_name instead.

Often used with CSS to style elements with common properties.

• class_name (String; optional): Often used with CSS to style elements with common properties.
• disabled (Bool; optional): Style this item as 'disabled'.
• divider (Bool; optional): Set to True if this entry is a divider. Typically, it will have

no children.

• external_link (Bool; optional): If true, the browser will treat this as an external link,

forcing a page refresh at the new location. If false, this just changes the location without triggering a page refresh. Use this if you are observing dcc.Location, for instance. Defaults to true for absolute URLs and false otherwise.

• header (Bool; optional): Set to True if this is a header, rather than a conventional

menu item.

• href (String; optional): Pass a URL (relative or absolute) to make the menu entry a link.
• key (String; optional): A unique identifier for the component, used to improve

performance by React.js while rendering components See https://reactjs.org/docs/lists-and-keys.html for more info

• loading_state (optional): Object that holds the loading state object coming from dash-renderer. loadingstate has the following type: lists containing elements 'isloading', 'propname', 'componentname'.

Those elements have the following types:

• is_loading (Bool; optional): Determines if the component is loading or not
• prop_name (String; optional): Holds which property is loading
• component_name (String; optional): Holds the name of the component that is loading
• n_clicks (Real; optional): An integer that represents the number of times

that this element has been clicked on.

• n_clicks_timestamp (Real; optional): An integer that represents the time (in ms since 1970)

at which n_clicks changed. This can be used to tell which button was changed most recently.

• style (Dict; optional): Defines CSS styles which will override styles previously set.
• target (String; optional): Target attribute to pass on to the link. Only applies to external links.
• toggle (Bool; optional): Whether to toggle the DropdownMenu on click. Default: True.

dbc_fade(;kwargs...)
dbc_fade(children::Any;kwargs...)
dbc_fade(children_maker::Function;kwargs...)

A Fade component. Hide or show content with a fading animation. Visibility of the children is controlled by the is_open prop which can be targetted by callbacks. Keyword arguments:

• children (a list of or a singular dash component, string or number; optional): The children of this component
• 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.

• appear (Bool; optional): Show fade-in animation on initial page load. Default: True.
• className (String; optional): DEPRECATED Use class_name instead.

Often used with CSS to style elements with common properties.

• class_name (String; optional): Often used with CSS to style elements with common properties.
• enter (Bool; optional): Enable or disable enter transitions. Default: True.
• exit (Bool; optional): Enable or disable exit transitions. Default: True.
• is_in (Bool; optional): Controls whether the children of the Fade component are currently visible

or not.

• key (String; optional): A unique identifier for the component, used to improve

performance by React.js while rendering components See https://reactjs.org/docs/lists-and-keys.html for more info

• loading_state (optional): Object that holds the loading state object coming from dash-renderer. loadingstate has the following type: lists containing elements 'isloading', 'propname', 'componentname'.

Those elements have the following types:

• is_loading (Bool; optional): Determines if the component is loading or not
• prop_name (String; optional): Holds which property is loading
• component_name (String; optional): Holds the name of the component that is loading
• style (Dict; optional): Defines CSS styles which will override styles previously set.
• tag (String; optional): HTML tag to use for the fade component. Default: div.
• timeout (optional): The duration of the transition, in milliseconds.

You may specify a single timeout for all transitions like: timeout=500 or individually like: timeout={'enter': 300, 'exit': 500}. timeout has the following type: Real | lists containing elements 'enter', 'exit'. Those elements have the following types:

• enter (Real; optional)
• exit (Real; optional)

dbc_form(;kwargs...)
dbc_form(children::Any;kwargs...)
dbc_form(children_maker::Function;kwargs...)

A Form component. The Form component can be used to organise collections of input components and apply consistent styling. Keyword arguments:

• children (a list of or a singular dash component, string or number; optional): The children of this component
• 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.

• action (String; optional): The URI of a program that processes the information submitted via the form.
• className (String; optional): DEPRECATED Use class_name instead.

Often used with CSS to style elements with common properties.

• class_name (String; optional): Often used with CSS to style elements with common properties.
• key (String; optional): A unique identifier for the component, used to improve

performance by React.js while rendering components See https://reactjs.org/docs/lists-and-keys.html for more info

• loading_state (optional): Object that holds the loading state object coming from dash-renderer. loadingstate has the following type: lists containing elements 'isloading', 'propname', 'componentname'.

Those elements have the following types:

• is_loading (Bool; optional): Determines if the component is loading or not
• prop_name (String; optional): Holds which property is loading
• component_name (String; optional): Holds the name of the component that is loading
• method (a value equal to: 'GET', 'POST'; optional): Defines which HTTP method to use when submitting the form. Can be GET

(default) or POST.

• n_submit (Real; optional): Number of times the Enter key was pressed while the input had focus.
• n_submit_timestamp (Real; optional): Last time that Enter was pressed.
• prevent_default_on_submit (Bool; optional): The form calls preventDefault on submit events. If you want form data to

be posted to the endpoint specified by action on submit events, set preventdefaulton_submit to False. Defaults to True.

• style (Dict; optional): Defines CSS styles which will override styles previously set.

dbc_formfeedback(;kwargs...)
dbc_formfeedback(children::Any;kwargs...)
dbc_formfeedback(children_maker::Function;kwargs...)

A FormFeedback component. The FormFeedback component can be used to provide feedback on input values in a form. Add the form feedback to your layout and set the valid or invalid props of the associated input to toggle visibility. Keyword arguments:

• children (a list of or a singular dash component, string or number; optional): The children of this component
• 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.

• className (String; optional): DEPRECATED Use class_name instead.

Often used with CSS to style elements with common properties.

• class_name (String; optional): Often used with CSS to style elements with common properties.
• key (String; optional): A unique identifier for the component, used to improve

performance by React.js while rendering components See https://reactjs.org/docs/lists-and-keys.html for more info

• loading_state (optional): Object that holds the loading state object coming from dash-renderer. loadingstate has the following type: lists containing elements 'isloading', 'propname', 'componentname'.

Those elements have the following types:

• is_loading (Bool; optional): Determines if the component is loading or not
• prop_name (String; optional): Holds which property is loading
• component_name (String; optional): Holds the name of the component that is loading
• style (Dict; optional): Defines CSS styles which will override styles previously set.
• tooltip (Bool; optional): Use styled tooltips to display validation feedback.
• type (String; optional): Either 'valid' or 'invalid'.

dbc_formfloating(;kwargs...)
dbc_formfloating(children::Any;kwargs...)
dbc_formfloating(children_maker::Function;kwargs...)

A FormFloating component. A component for adding float labels to form controls in forms. Keyword arguments:

• children (a list of or a singular dash component, string or number; optional): The children of this component
• 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.

• className (String; optional): DEPRECATED Use class_name instead.

Often used with CSS to style elements with common properties.

• class_name (String; optional): Often used with CSS to style elements with common properties.
• html_for (String; optional): Set the for attribute of the label to bind it to a particular element
• key (String; optional): A unique identifier for the component, used to improve

performance by React.js while rendering components See https://reactjs.org/docs/lists-and-keys.html for more info

• loading_state (optional): Object that holds the loading state object coming from dash-renderer. loadingstate has the following type: lists containing elements 'isloading', 'propname', 'componentname'.

Those elements have the following types:

• is_loading (Bool; optional): Determines if the component is loading or not
• prop_name (String; optional): Holds which property is loading
• component_name (String; optional): Holds the name of the component that is loading
• style (Dict; optional): Defines CSS styles which will override styles previously set.

dbc_formtext(;kwargs...)
dbc_formtext(children::Any;kwargs...)
dbc_formtext(children_maker::Function;kwargs...)

A FormText component. Add explanatory text below your input components. Keyword arguments:

• children (a list of or a singular dash component, string or number; optional): The children of this component
• 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.

• className (String; optional): DEPRECATED Use class_name instead.

Often used with CSS to style elements with common properties.

• class_name (String; optional): Often used with CSS to style elements with common properties.
• color (String; optional): Text color, options: primary, secondary, success, warning, danger, info,

muted, light, dark, body, white, black-50, white-50 or any valid CSS color of your choice (e.g. a hex code, a decimal code or a CSS color name).

• key (String; optional): A unique identifier for the component, used to improve

performance by React.js while rendering components See https://reactjs.org/docs/lists-and-keys.html for more info

• loading_state (optional): Object that holds the loading state object coming from dash-renderer. loadingstate has the following type: lists containing elements 'isloading', 'propname', 'componentname'.

Those elements have the following types:

• is_loading (Bool; optional): Determines if the component is loading or not
• prop_name (String; optional): Holds which property is loading
• component_name (String; optional): Holds the name of the component that is loading
• style (Dict; optional): Defines CSS styles which will override styles previously set.

dbc_input(;kwargs...)

An Input component. A basic HTML input control for entering text, numbers, or passwords, with Bootstrap styles automatically applied. This component is much like its counterpart in dashcorecomponents, but with a few additions such as the valid and invalid props for providing user feedback.

Note that checkbox and radio types are supported through the Checklist and RadioItems component. Dates, times, and file uploads are supported through separate components in other libraries. Keyword arguments:

• 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.

• autoComplete (String; optional): DEPRECATED Use autocomplete instead.

This attribute indicates whether the value of the control can be automatically completed by the browser.

• autoFocus (a value equal to: 'autoFocus', 'autofocus', 'AUTOFOCUS' | Bool; optional): DEPRECATED Use autofocus instead.

The element should be automatically focused after the page loaded. autoFocus is an HTML boolean attribute - it is enabled by a boolean or 'autoFocus'. Alternative capitalizations autofocus & AUTOFOCUS are also acccepted.

• autocomplete (String; optional): This attribute indicates whether the value of the control can be

automatically completed by the browser.

• autofocus (a value equal to: 'autoFocus', 'autofocus', 'AUTOFOCUS' | Bool; optional): The element should be automatically focused after the page loaded.

autoFocus is an HTML boolean attribute - it is enabled by a boolean or 'autoFocus'. Alternative capitalizations autofocus & AUTOFOCUS are also acccepted.

• className (String; optional): DEPRECATED Use class_name instead.

Often used with CSS to style elements with common properties.

• class_name (String; optional): Often used with CSS to style elements with common properties.
• debounce (Bool; optional): If true, changes to input will be sent back to the Dash server

only when the enter key is pressed or when the component loses focus. If it's false, it will sent the value back on every change.

• disabled (Bool; optional): Set to True to disable the Input.
• html_size (String; optional): The initial size of the control. This value is in pixels unless the value

of the type attribute is text or password, in which case it is an integer number of characters. This attribute applies only when the type attribute is set to text, search, tel, url, email, or password, otherwise it is ignored. In addition, the size must be greater than zero. If you do not specify a size, a default value of 20 is used.

• inputMode (a value equal to: "verbatim", "latin", "latin-name", "latin-prose", "full-width-latin", "kana", "katakana", "numeric", "tel", "email", "url"; optional): DEPRECATED Use inputmode instead.

Provides a hint to the browser as to the type of data that might be entered by the user while editing the element or its contents.

• inputmode (a value equal to: "verbatim", "latin", "latin-name", "latin-prose", "full-width-latin", "kana", "katakana", "numeric", "tel", "email", "url"; optional): Provides a hint to the browser as to the type of data that might be

entered by the user while editing the element or its contents.

• invalid (Bool; optional): Apply invalid style to the Input for feedback purposes. This will cause

any FormFeedback in the enclosing div with valid=False to display.

• key (String; optional): A unique identifier for the component, used to improve

performance by React.js while rendering components See https://reactjs.org/docs/lists-and-keys.html for more info

• list (String; optional): Identifies a list of pre-defined options to suggest to the user.

The value must be the id of a <datalist> element in the same document. The browser displays only options that are valid values for this input element. This attribute is ignored when the type attribute's value is hidden, checkbox, radio, file, or a button type.

• loading_state (optional): Object that holds the loading state object coming from dash-renderer. loadingstate has the following type: lists containing elements 'isloading', 'propname', 'componentname'.

Those elements have the following types:

• is_loading (Bool; optional): Determines if the component is loading or not
• prop_name (String; optional): Holds which property is loading
• component_name (String; optional): Holds the name of the component that is loading
• max (String | Real; optional): The maximum (numeric or date-time) value for this item, which must not be

less than its minimum (min attribute) value.

• maxLength (String | Real; optional): DEPRECATED Use maxlength instead.

If the value of the type attribute is text, email, search, password, tel, or url, this attribute specifies the maximum number of characters (in UTF-16 code units) that the user can enter. For other control types, it is ignored. It can exceed the value of the size attribute. If it is not specified, the user can enter an unlimited number of characters. Specifying a negative number results in the default behavior (i.e. the user can enter an unlimited number of characters). The constraint is evaluated only when the value of the attribute has been changed.

• maxlength (String | Real; optional): If the value of the type attribute is text, email, search, password, tel,

or url, this attribute specifies the maximum number of characters (in UTF-16 code units) that the user can enter. For other control types, it is ignored. It can exceed the value of the size attribute. If it is not specified, the user can enter an unlimited number of characters. Specifying a negative number results in the default behavior (i.e. the user can enter an unlimited number of characters). The constraint is evaluated only when the value of the attribute has been changed.

• min (String | Real; optional): The minimum (numeric or date-time) value for this item, which must not be

greater than its maximum (max attribute) value.

• minLength (String | Real; optional): DEPRECATED Use minlength instead.

If the value of the type attribute is text, email, search, password, tel, or url, this attribute specifies the minimum number of characters (in Unicode code points) that the user can enter. For other control types, it is ignored.

• minlength (String | Real; optional): If the value of the type attribute is text, email, search, password, tel,

or url, this attribute specifies the minimum number of characters (in Unicode code points) that the user can enter. For other control types, it is ignored.

• n_blur (Real; optional): Number of times the input lost focus.
• n_blur_timestamp (Real; optional): Last time the input lost focus.
• n_submit (Real; optional): Number of times the Enter key was pressed while the input had focus.
• n_submit_timestamp (Real; optional): Last time that Enter was pressed.
• name (String; optional): The name of the control, which is submitted with the form data.
• pattern (String; optional): A regular expression that the control's value is checked against. The

pattern must match the entire value, not just some subset. Use the title attribute to describe the pattern to help the user. This attribute applies when the value of the type attribute is text, search, tel, url, email, or password, otherwise it is ignored. The regular expression language is the same as JavaScript RegExp algorithm, with the 'u' parameter that makes it treat the pattern as a sequence of unicode code points. The pattern is not surrounded by forward slashes.

• persisted_props (Array of a value equal to: 'value's; optional): 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 (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.

• persistence_type (a value equal to: 'local', 'session', 'memory'; optional): 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.

• placeholder (String | Real; optional): A hint to the user of what can be entered in the control . The placeholder

text must not contain carriage returns or line-feeds. Note: Do not use the placeholder attribute instead of a <label> element, their purposes are different. The <label> attribute describes the role of the form element (i.e. it indicates what kind of information is expected), and the placeholder attribute is a hint about the format that the content should take. There are cases in which the placeholder attribute is never displayed to the user, so the form must be understandable without it.

• plaintext (Bool; optional): Set to true for an input styled as plain text with the default form field

styling removed and the correct margins and padding preserved. Typically you will want to use this in conjunction with readonly=True.

• readonly (Bool | a value equal to: 'readOnly', 'readonly', 'READONLY'; optional): Indicates whether the element can be edited.
• required (a value equal to: 'required', 'REQUIRED' | Bool; optional): This attribute specifies that the user must fill in a value before

submitting a form. It cannot be used when the type attribute is hidden, image, or a button type (submit, reset, or button). The :optional and :required CSS pseudo-classes will be applied to the field as appropriate. required is an HTML boolean attribute - it is enabled by a boolean or 'required'. Alternative capitalizations REQUIRED are also acccepted.

• size (String; optional): Set the size of the Input. Options: 'sm' (small), 'md' (medium)

or 'lg' (large). Default is 'md'.

• step (String | Real; optional): Works with the min and max attributes to limit the increments at which a

numeric or date-time value can be set. It can be the string any or a positive floating point number. If this attribute is not set to any, the control accepts only values at multiples of the step value greater than the minimum.

• style (Dict; optional): Defines CSS styles which will override styles previously set.
• tabIndex (String; optional): DEPRECATED Use tabindex instead.

Overrides the browser's default tab order and follows the one specified instead.

• tabindex (String; optional): Overrides the browser's default tab order and follows the one specified instead.
• type (a value equal to: "text", 'number', 'password', 'email', 'range', 'search', 'tel', 'url', 'hidden'; optional): The type of control to render
• valid (Bool; optional): Apply valid style to the Input for feedback purposes. This will cause

any FormFeedback in the enclosing div with valid=True to display.

• value (String | Real; optional): The value of the Input

dbc_inputgroup(;kwargs...)
dbc_inputgroup(children::Any;kwargs...)
dbc_inputgroup(children_maker::Function;kwargs...)

An InputGroup component. A component for grouping together inputs and buttons, dropdowns or text. Keyword arguments:

• children (a list of or a singular dash component, string or number; optional): The children of this component.
• 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.

• className (String; optional): DEPRECATED Use class_name instead.

Often used with CSS to style elements with common properties.

• class_name (String; optional): Often used with CSS to style elements with common properties.
• key (String; optional): A unique identifier for the component, used to improve

performance by React.js while rendering components See https://reactjs.org/docs/lists-and-keys.html for more info

• loading_state (optional): Object that holds the loading state object coming from dash-renderer. loadingstate has the following type: lists containing elements 'isloading', 'propname', 'componentname'.

Those elements have the following types:

• is_loading (Bool; optional): Determines if the component is loading or not
• prop_name (String; optional): Holds which property is loading
• component_name (String; optional): Holds the name of the component that is loading
• size (String; optional): Set the size of the Input. Options: 'sm' (small), 'md' (medium)

or 'lg' (large). Default is 'md'.

• style (Dict; optional): Defines CSS styles which will override styles previously set.

dbc_inputgrouptext(;kwargs...)
dbc_inputgrouptext(children::Any;kwargs...)
dbc_inputgrouptext(children_maker::Function;kwargs...)

An InputGroupText component. Use for wrapping text in InputGroups. Keyword arguments:

• children (a list of or a singular dash component, string or number; optional): The children of this component.
• 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.

• className (String; optional): DEPRECATED Use class_name instead.

Often used with CSS to style elements with common properties.

• class_name (String; optional): Often used with CSS to style elements with common properties.
• key (String; optional): A unique identifier for the component, used to improve

performance by React.js while rendering components See https://reactjs.org/docs/lists-and-keys.html for more info

• loading_state (optional): Object that holds the loading state object coming from dash-renderer. loadingstate has the following type: lists containing elements 'isloading', 'propname', 'componentname'.

Those elements have the following types:

• is_loading (Bool; optional): Determines if the component is loading or not
• prop_name (String; optional): Holds which property is loading
• component_name (String; optional): Holds the name of the component that is loading
• style (Dict; optional): Defines CSS styles which will override styles previously set.

dbc_label(;kwargs...)
dbc_label(children::Any;kwargs...)
dbc_label(children_maker::Function;kwargs...)

A Label component. A component for adding labels to inputs in forms with added sizing controls. Keyword arguments:

• children (a list of or a singular dash component, string or number; optional): The children of this component
• 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.

• align (a value equal to: 'start', 'center', 'end'; optional): Set vertical alignment of the label, options: 'start', 'center', 'end',

default: 'center'

• check (Bool; optional): Set to True when using to label a Checkbox or RadioButton.
• className (String; optional): DEPRECATED Use class_name instead.

Often used with CSS to style elements with common properties.

• class_name (String; optional): Often used with CSS to style elements with common properties.
• color (String; optional): Text color, options: primary, secondary, success, warning, danger, info,

muted, light, dark, body, white, black-50, white-50 or any valid CSS color of your choice (e.g. a hex code, a decimal code or a CSS color name).

• hidden (Bool; optional): Hide label from UI, but allow it to be discovered by screen-readers.
• html_for (String; optional): Set the for attribute of the label to bind it to a particular element
• key (String; optional): A unique identifier for the component, used to improve

performance by React.js while rendering components See https://reactjs.org/docs/lists-and-keys.html for more info

• lg (optional): Specify label width on a large screen

Valid arguments are boolean, an integer in the range 1-12 inclusive, or a dictionary with keys 'offset', 'order', 'size'. See the documentation for more details.

• loading_state (optional): Object that holds the loading state object coming from dash-renderer. loadingstate has the following type: lists containing elements 'isloading', 'propname', 'componentname'.

Those elements have the following types:

• is_loading (Bool; optional): Determines if the component is loading or not
• prop_name (String; optional): Holds which property is loading
• component_name (String; optional): Holds the name of the component that is loading
• md (optional): Specify label width on a medium screen

Valid arguments are boolean, an integer in the range 1-12 inclusive, or a dictionary with keys 'offset', 'order', 'size'. See the documentation for more details.

• size (String; optional): Set size of label. Options 'sm', 'md' (default) or 'lg'.
• sm (optional): Specify label width on a small screen

Valid arguments are boolean, an integer in the range 1-12 inclusive, or a dictionary with keys 'offset', 'order', 'size'. See the documentation for more details.

• style (Dict; optional): Defines CSS styles which will override styles previously set.
• width (optional): Specify width of label for use in grid layouts. Accepts the same values

as the Col component.

• xl (optional): Specify label width on an extra large screen

Valid arguments are boolean, an integer in the range 1-12 inclusive, or a dictionary with keys 'offset', 'order', 'size'. See the documentation for more details.

• xs (optional): Specify label width on extra small screen

Valid arguments are boolean, an integer in the range 1-12 inclusive, or a dictionary with keys 'offset', 'order', 'size'. See the documentation for more details.

dbc_listgroup(;kwargs...)
dbc_listgroup(children::Any;kwargs...)
dbc_listgroup(children_maker::Function;kwargs...)

A ListGroup component. Bootstrap list groups are a flexible way to display a series of content. Use in conjunction with ListGroupItem, ListGroupItemHeading and ListGroupItemText. Keyword arguments:

• children (a list of or a singular dash component, string or number; optional): The children of this component
• 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.

• className (String; optional): DEPRECATED Use class_name instead.

Often used with CSS to style elements with common properties.

• class_name (String; optional): Often used with CSS to style elements with common properties.
• flush (Bool; optional): When True the list-group-flush class is applied which removes some borders

and rounded corners from the list group in order that they can be rendered edge-to-edge in the parent container (e.g. a Card).

• horizontal (Bool | String; optional): Set to True for a horizontal ListGroup, or supply one of the breakpoints

as a string for a ListGroup that is horizontal at that breakpoint and up.

Note that horizontal ListGroups cannot be combined with flush ListGroups, so if flush is True then horizontal has no effect.

• key (String; optional): A unique identifier for the component, used to improve

performance by React.js while rendering components See https://reactjs.org/docs/lists-and-keys.html for more info

• loading_state (optional): Object that holds the loading state object coming from dash-renderer. loadingstate has the following type: lists containing elements 'isloading', 'propname', 'componentname'.

Those elements have the following types:

• is_loading (Bool; optional): Determines if the component is loading or not
• prop_name (String; optional): Holds which property is loading
• component_name (String; optional): Holds the name of the component that is loading
• numbered (Bool; optional): Generate numbered list items.
• style (Dict; optional): Defines CSS styles which will override styles previously set.
• tag (String; optional): HTML tag to use for the list, default: ul

dbc_listgroupitem(;kwargs...)
dbc_listgroupitem(children::Any;kwargs...)
dbc_listgroupitem(children_maker::Function;kwargs...)

A ListGroupItem component. Create a single item in a ListGroup. Keyword arguments:

• children (a list of or a singular dash component, string or number; optional): The children of this component
• 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.

• action (Bool; optional): Apply list-group-item-action class for hover animation etc.
• active (Bool; optional): Apply active style to item
• className (String; optional): DEPRECATED Use class_name instead.

Often used with CSS to style elements with common properties.

• class_name (String; optional): Often used with CSS to style elements with common properties.
• color (String; optional): Item color, options: primary, secondary, success, info, warning,

danger, or any valid CSS color of your choice (e.g. a hex code, a decimal code or a CSS color name) default: secondary

• disabled (Bool; optional): Apply disabled style to item
• external_link (Bool; optional): If true, the browser will treat this as an external link,

forcing a page refresh at the new location. If false, this just changes the location without triggering a page refresh. Use this if you are observing dcc.Location, for instance. Defaults to true for absolute URLs and false otherwise.

• href (String; optional): Pass a URL (relative or absolute) to make the list group item a link.
• key (String; optional): A unique identifier for the component, used to improve

performance by React.js while rendering components See https://reactjs.org/docs/lists-and-keys.html for more info

• loading_state (optional): Object that holds the loading state object coming from dash-renderer. loadingstate has the following type: lists containing elements 'isloading', 'propname', 'componentname'.

Those elements have the following types:

• is_loading (Bool; optional): Determines if the component is loading or not
• prop_name (String; optional): Holds which property is loading
• component_name (String; optional): Holds the name of the component that is loading
• n_clicks (Real; optional): An integer that represents the number of times

that this element has been clicked on.

• n_clicks_timestamp (Real; optional): An integer that represents the time (in ms since 1970)

at which n_clicks changed. This can be used to tell which button was changed most recently.

• style (Dict; optional): Defines CSS styles which will override styles previously set.
• tag (String; optional): HTML tag to use for the listgroupitem, default: li
• target (String; optional): Target attribute to pass on to the link. Only applies to external links.

dbc_modal(;kwargs...)
dbc_modal(children::Any;kwargs...)
dbc_modal(children_maker::Function;kwargs...)

A Modal component. Create a toggleable dialog using the Modal component. Toggle the visibility with the is_open prop. Keyword arguments:

• children (a list of or a singular dash component, string or number; optional): The children of this component
• 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.

• autoFocus (Bool; optional): DEPRECATED Use autofocus instead

Puts the focus on the modal when initialized.

• autofocus (Bool; optional): Puts the focus on the modal when initialized.
• backdrop (Bool | a value equal to: 'static'; optional): Includes a modal-backdrop element. Alternatively, specify 'static' for a

backdrop which doesn't close the modal on click.

• backdropClassName (String; optional): DEPRECATED Use backdrop_class_name instead

CSS class to apply to the backdrop.

• backdrop_class_name (String; optional): CSS class to apply to the backdrop.
• centered (Bool; optional): If true, vertically center modal on page.
• className (String; optional): DEPRECATED Use class_name instead.

Often used with CSS to style elements with common properties.

• class_name (String; optional): Often used with CSS to style elements with common properties.
• contentClassName (String; optional): DEPRECATED Use content_class_name instead

CSS class to apply to the modal content.

• content_class_name (String; optional): CSS class to apply to the modal content.
• fade (Bool; optional): Set to false for a modal that simply appears rather than fades into view.
• fullscreen (a value equal to: PropTypes.bool, PropTypes.oneOf(['sm-down', 'md-down', 'lg-down', 'xl-down', 'xxl-down']); optional): Renders a fullscreen modal. Specifying a breakpoint will render the modal

as fullscreen below the breakpoint size.

• is_open (Bool; optional): Whether modal is currently open.
• keyboard (Bool; optional): Close the modal when escape key is pressed.
• labelledBy (String; optional): DEPRECATED Use labelledby instead

The ARIA labelledby attribute

• labelledby (String; optional): The ARIA labelledby attribute
• modalClassName (String; optional): DEPRECATED Use modal_class_name instead

CSS class to apply to the modal.

• modal_class_name (String; optional): CSS class to apply to the modal.
• role (String; optional): The ARIA role attribute.
• scrollable (Bool; optional): It true, scroll the modal body rather than the entire modal when it is too

long to all fit on the screen.

• size (String; optional): Set the size of the modal. Options sm, lg, xl for small, large or extra

large sized modals, or leave undefined for default size.

• style (Dict; optional): Defines CSS styles which will override styles previously set.
• tag (String; optional): HTML tag to use for the Modal, default: div
• zIndex (Real | String; optional): DEPRECATED Use zindex instead

Set the z-index of the modal. Default 1050.

• zindex (Real | String; optional): Set the z-index of the modal. Default 1050.

dbc_modalbody(;kwargs...)
dbc_modalbody(children::Any;kwargs...)
dbc_modalbody(children_maker::Function;kwargs...)

A ModalBody component. Use this component to add consistent padding to the body (main content) of your Modals. Keyword arguments:

• children (a list of or a singular dash component, string or number; optional): The children of this component
• 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.

• className (String; optional): DEPRECATED Use class_name instead.

Often used with CSS to style elements with common properties.

• class_name (String; optional): Often used with CSS to style elements with common properties.
• loading_state (optional): Object that holds the loading state object coming from dash-renderer. loadingstate has the following type: lists containing elements 'isloading', 'propname', 'componentname'.

Those elements have the following types:

• is_loading (Bool; optional): Determines if the component is loading or not
• prop_name (String; optional): Holds which property is loading
• component_name (String; optional): Holds the name of the component that is loading
• style (Dict; optional): Defines CSS styles which will override styles previously set.
• tag (String; optional): HTML tag to use for the ModalBody, default: div

dbc_modalfooter(;kwargs...)
dbc_modalfooter(children::Any;kwargs...)
dbc_modalfooter(children_maker::Function;kwargs...)

A ModalFooter component. Add a footer to any modal. Keyword arguments:

• children (a list of or a singular dash component, string or number; optional): The children of this component
• 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.

• className (String; optional): DEPRECATED Use class_name instead.

Often used with CSS to style elements with common properties.

• class_name (String; optional): Often used with CSS to style elements with common properties.
• loading_state (optional): Object that holds the loading state object coming from dash-renderer. loadingstate has the following type: lists containing elements 'isloading', 'propname', 'componentname'.

Those elements have the following types:

• is_loading (Bool; optional): Determines if the component is loading or not
• prop_name (String; optional): Holds which property is loading
• component_name (String; optional): Holds the name of the component that is loading
• style (Dict; optional): Defines CSS styles which will override styles previously set.
• tag (String; optional): HTML tag to use for the ModalFooter, default: div

dbc_modalheader(;kwargs...)
dbc_modalheader(children::Any;kwargs...)
dbc_modalheader(children_maker::Function;kwargs...)

A ModalHeader component. Add a header to any modal. Keyword arguments:

• children (a list of or a singular dash component, string or number; optional): The children of this component
• 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.

• className (String; optional): DEPRECATED Use class_name instead.

Often used with CSS to style elements with common properties.

• class_name (String; optional): Often used with CSS to style elements with common properties.
• close_button (Bool; optional): Add a close button to the header that can be used to close the modal.
• loading_state (optional): Object that holds the loading state object coming from dash-renderer. loadingstate has the following type: lists containing elements 'isloading', 'propname', 'componentname'.

Those elements have the following types:

• is_loading (Bool; optional): Determines if the component is loading or not
• prop_name (String; optional): Holds which property is loading
• component_name (String; optional): Holds the name of the component that is loading
• style (Dict; optional): Defines CSS styles which will override styles previously set.
• tag (String; optional): HTML tag to use for the ModalHeader, default: div

dbc_modaltitle(;kwargs...)
dbc_modaltitle(children::Any;kwargs...)
dbc_modaltitle(children_maker::Function;kwargs...)

A ModalTitle component. Add a title to any modal. Should be used as a child of the ModalHeader. Keyword arguments:

• children (a list of or a singular dash component, string or number; optional): The children of this component
• 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.

• className (String; optional): DEPRECATED Use class_name instead.

Often used with CSS to style elements with common properties.

• class_name (String; optional): Often used with CSS to style elements with common properties.
• loading_state (optional): Object that holds the loading state object coming from dash-renderer. loadingstate has the following type: lists containing elements 'isloading', 'propname', 'componentname'.

Those elements have the following types:

• is_loading (Bool; optional): Determines if the component is loading or not
• prop_name (String; optional): Holds which property is loading
• component_name (String; optional): Holds the name of the component that is loading
• style (Dict; optional): Defines CSS styles which will override styles previously set.
• tag (String; optional): HTML tag to use for the ModalTitle, default: div

dbc_nav(;kwargs...)
dbc_nav(children::Any;kwargs...)
dbc_nav(children_maker::Function;kwargs...)

A Nav component. Nav can be used to group together a collection of navigation links. Keyword arguments:

• children (a list of or a singular dash component, string or number; optional): The children of this component
• 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.

• card (Bool; optional): Set to True when using Nav with pills styling inside a CardHeader.
• className (String; optional): DEPRECATED Use class_name instead.

Often used with CSS to style elements with common properties.

• class_name (String; optional): Often used with CSS to style elements with common properties.
• fill (Bool; optional): Expand the nav items to fill available horizontal space.
• horizontal (a value equal to: 'start', 'center', 'end', 'between', 'around'; optional): Specify the horizontal alignment of the NavItems. Options are 'start',

'center', or 'end'.

• justified (Bool; optional): Expand the nav items to fill available horizontal space, making sure

every nav item has the same width.

• key (String; optional): A unique identifier for the component, used to improve

performance by React.js while rendering components See https://reactjs.org/docs/lists-and-keys.html for more info

• loading_state (optional): Object that holds the loading state object coming from dash-renderer. loadingstate has the following type: lists containing elements 'isloading', 'propname', 'componentname'.

Those elements have the following types:

• is_loading (Bool; optional): Determines if the component is loading or not
• prop_name (String; optional): Holds which property is loading
• component_name (String; optional): Holds the name of the component that is loading
• navbar (Bool; optional): Set to True if using Nav in Navbar component. This applies the navbar-nav

class to the Nav which uses more lightweight styles to match the parent Navbar better.

• navbar_scroll (Bool; optional): Enable vertical scrolling within the toggleable contents of a collapsed Navbar.
• pills (Bool; optional): Apply pill styling to nav items. Active items will be indicated by a pill.
• style (Dict; optional): Defines CSS styles which will override styles previously set.
• vertical (Bool | String; optional): Stack NavItems vertically. Set to True for a vertical Nav on all screen

sizes, or pass one of the Bootstrap breakpoints ('xs', 'sm', 'md', 'lg', 'xl') for a Nav which is vertical at that breakpoint and above, and horizontal on smaller screens.

dbc_navbar(;kwargs...)
dbc_navbar(children::Any;kwargs...)
dbc_navbar(children_maker::Function;kwargs...)

A Navbar component. The Navbar component can be used to make fully customisable navbars. Keyword arguments:

• children (a list of or a singular dash component, string or number; optional): The children of this component
• 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.

• className (String; optional): DEPRECATED Use class_name instead.

Often used with CSS to style elements with common properties.

• class_name (String; optional): Often used with CSS to style elements with common properties.
• color (String; optional): Sets the color of the Navbar. Main options are primary, light and dark, default light.

You can also choose one of the other contextual classes provided by Bootstrap (secondary, success, warning, danger, info, white) or any valid CSS color of your choice (e.g. a hex code, a decimal code or a CSS color name)

• dark (Bool; optional): Applies the navbar-dark class to the Navbar, causing text in the children

of the Navbar to use light colors for contrast / visibility.

• expand (Bool | String; optional): Specify screen size at which to expand the menu bar, e.g. sm, md, lg etc.
• fixed (String; optional): Fix the navbar's position at the top or bottom of the page, options: top, bottom
• key (String; optional): A unique identifier for the component, used to improve

performance by React.js while rendering components See https://reactjs.org/docs/lists-and-keys.html for more info

• light (Bool; optional): Applies the navbar-light class to the Navbar, causing text in the children

of the Navbar to use dark colors for contrast / visibility.

• loading_state (optional): Object that holds the loading state object coming from dash-renderer. loadingstate has the following type: lists containing elements 'isloading', 'propname', 'componentname'.

Those elements have the following types:

• is_loading (Bool; optional): Determines if the component is loading or not
• prop_name (String; optional): Holds which property is loading
• component_name (String; optional): Holds the name of the component that is loading
• role (String; optional): The ARIA role attribute.
• sticky (a value equal to: 'top'; optional): Position the navbar at the top of the viewport, but only after scrolling past it.

A convenience prop for the sticky-top positioning class. Not supported in <= IE11 and other older browsers

With sticky, the navbar remains in the viewport when you scroll. By contrast, with fixed, the navbar will remain at the top or bottom of the page. sticky='top'

• style (Dict; optional): Defines CSS styles which will override styles previously set.
• tag (String; optional): HTML tag to use for the Navbar, default 'nav'

dbc_navbarbrand(;kwargs...)
dbc_navbarbrand(children::Any;kwargs...)
dbc_navbarbrand(children_maker::Function;kwargs...)

A NavbarBrand component. Call out attention to a brand name or site title within a navbar. Keyword arguments:

• children (a list of or a singular dash component, string or number; optional): The children of this component
• 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.

• className (String; optional): DEPRECATED Use class_name instead.

Often used with CSS to style elements with common properties.

• class_name (String; optional): Often used with CSS to style elements with common properties.
• external_link (Bool; optional): If true, the browser will treat this as an external link,

forcing a page refresh at the new location. If false, this just changes the location without triggering a page refresh. Use this if you are observing dcc.Location, for instance. Defaults to true for absolute URLs and false otherwise.

• href (String; optional): URL of the linked resource
• key (String; optional): A unique identifier for the component, used to improve

performance by React.js while rendering components See https://reactjs.org/docs/lists-and-keys.html for more info

• loading_state (optional): Object that holds the loading state object coming from dash-renderer. loadingstate has the following type: lists containing elements 'isloading', 'propname', 'componentname'.

Those elements have the following types:

• is_loading (Bool; optional): Determines if the component is loading or not
• prop_name (String; optional): Holds which property is loading
• component_name (String; optional): Holds the name of the component that is loading
• style (Dict; optional): Defines CSS styles which will override styles previously set.

dbc_navbarsimple(;kwargs...)
dbc_navbarsimple(children::Any;kwargs...)
dbc_navbarsimple(children_maker::Function;kwargs...)

A NavbarSimple component. A self-contained navbar ready for use. If you need more customisability try Navbar instead. Keyword arguments:

• children (a list of or a singular dash component, string or number; optional): The children of this component
• 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.

• brand (a list of or a singular dash component, string or number; optional): Brand text, to go top left of the navbar.
• brand_external_link (Bool; optional): If true, the browser will treat the brand link as external,

forcing a page refresh at the new location. If false, this just changes the location without triggering a page refresh. Use this if you are observing dcc.Location, for instance. Defaults to true for absolute URLs and false otherwise.

• brand_href (String; optional): Link to attach to brand.
• brand_style (Dict; optional): CSS style options for brand.
• className (String; optional): DEPRECATED Use class_name instead.

Often used with CSS to style elements with common properties.

• class_name (String; optional): Often used with CSS to style elements with common properties.
• color (String; optional): Sets the color of the NavbarSimple. Main options are primary, light and dark, default light.

You can also choose one of the other contextual classes provided by Bootstrap (secondary, success, warning, danger, info, white) or any valid CSS color of your choice (e.g. a hex code, a decimal code or a CSS color name)

• dark (Bool; optional): Applies the navbar-dark class to the NavbarSimple, causing text in the

children of the Navbar to use light colors for contrast / visibility.

• expand (Bool | String; optional): Specify breakpoint at which to expand the menu bar. Options are: 'xs',

'sm', 'md', 'lg', or 'xl'. Below this breakpoint the navbar will collapse and navitems will be placed in a togglable collapse element.

• fixed (String; optional): Fix the navbar's position at the top or bottom of the page, options: top,

bottom

• fluid (Bool; optional): The contents of the Navbar are wrapped in a container, use fluid=True to

make this container fluid, so that in particular, the contents of the navbar fill the available horizontal space.

• key (String; optional): A unique identifier for the component, used to improve

performance by React.js while rendering components See https://reactjs.org/docs/lists-and-keys.html for more info

• light (Bool; optional): Applies the navbar-light class to the NavbarSimple, causing text in the

children of the Navbar to use dark colors for contrast / visibility.

• links_left (Bool; optional): Align the navlinks in the navbar to the left. Default: False.
• loading_state (optional): Object that holds the loading state object coming from dash-renderer. loadingstate has the following type: lists containing elements 'isloading', 'propname', 'componentname'.

Those elements have the following types:

• is_loading (Bool; optional): Determines if the component is loading or not
• prop_name (String; optional): Holds which property is loading
• component_name (String; optional): Holds the name of the component that is loading
• sticky (String; optional): Stick the navbar to the top or the bottom of the viewport, options: top, bottom

With sticky, the navbar remains in the viewport when you scroll. By contrast, with fixed, the navbar will remain at the top or bottom of the page.

• style (Dict; optional): Defines CSS styles which will override styles previously set.

dbc_navbartoggler(;kwargs...)
dbc_navbartoggler(children::Any;kwargs...)
dbc_navbartoggler(children_maker::Function;kwargs...)

A NavbarToggler component. Use this component to create a navbar toggle to show navlinks when the navbar collapses on smaller screens. Keyword arguments:

• children (a list of or a singular dash component, string or number; optional): The children of this component
• 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.

• className (String; optional): DEPRECATED Use class_name instead.

Often used with CSS to style elements with common properties.

• class_name (String; optional): Often used with CSS to style elements with common properties.
• key (String; optional): A unique identifier for the component, used to improve

performance by React.js while rendering components See https://reactjs.org/docs/lists-and-keys.html for more info

• loading_state (optional): Object that holds the loading state object coming from dash-renderer. loadingstate has the following type: lists containing elements 'isloading', 'propname', 'componentname'.

Those elements have the following types:

• is_loading (Bool; optional): Determines if the component is loading or not
• prop_name (String; optional): Holds which property is loading
• component_name (String; optional): Holds the name of the component that is loading
• n_clicks (Real; optional): An integer that represents the number of times

that this element has been clicked on.

• n_clicks_timestamp (Real; optional): An integer that represents the time (in ms since 1970)

at which n_clicks changed. This can be used to tell which button was changed most recently.

• style (Dict; optional): Defines CSS styles which will override styles previously set.
• type (String; optional): Toggle type, default: button.

dbc_navitem(;kwargs...)
dbc_navitem(children::Any;kwargs...)
dbc_navitem(children_maker::Function;kwargs...)

A NavItem component. Create a single item in a Nav. Keyword arguments:

• children (a list of or a singular dash component, string or number; optional): The children of this component
• 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.

• className (String; optional): DEPRECATED Use class_name instead.

Often used with CSS to style elements with common properties.

• class_name (String; optional): Often used with CSS to style elements with common properties.
• key (String; optional): A unique identifier for the component, used to improve

performance by React.js while rendering components See https://reactjs.org/docs/lists-and-keys.html for more info

• loading_state (optional): Object that holds the loading state object coming from dash-renderer. loadingstate has the following type: lists containing elements 'isloading', 'propname', 'componentname'.

Those elements have the following types:

• is_loading (Bool; optional): Determines if the component is loading or not
• prop_name (String; optional): Holds which property is loading
• component_name (String; optional): Holds the name of the component that is loading
• style (Dict; optional): Defines CSS styles which will override styles previously set.

dbc_navlink(;kwargs...)
dbc_navlink(children::Any;kwargs...)
dbc_navlink(children_maker::Function;kwargs...)

A NavLink component. Add a link to a Nav. Can be used as a child of NavItem or of Nav directly. Keyword arguments:

• children (a list of or a singular dash component, string or number; optional): The children of this component
• 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.

• active (Bool | a value equal to: 'partial', 'exact'; optional): Apply 'active' style to this component. Set to "exact" to automatically

toggle active status when the current pathname matches href, or to "partial" to automatically toggle on a partial match. Assumes that href is a relative url such as /link rather than an absolute such as https://example.com/link

For example

• dbc.NavLink(..., href="/my-page", active="exact") will be active on "/my-page" but not "/my-page/other" or "/random"
• dbc.NavLink(..., href="/my-page", active="partial") will be active on "/my-page" and "/my-page/other" but not "/random"
• className (String; optional): DEPRECATED Use class_name instead.

Often used with CSS to style elements with common properties.

• class_name (String; optional): Often used with CSS to style elements with common properties.
• disabled (Bool; optional): Disable the link
• external_link (Bool; optional): If true, the browser will treat this as an external link,

forcing a page refresh at the new location. If false, this just changes the location without triggering a page refresh. Use this if you are observing dcc.Location, for instance. Defaults to true for absolute URLs and false otherwise.

• href (String; optional): The URL of the linked resource.
• key (String; optional): A unique identifier for the component, used to improve

performance by React.js while rendering components See https://reactjs.org/docs/lists-and-keys.html for more info

• loading_state (optional): Object that holds the loading state object coming from dash-renderer. loadingstate has the following type: lists containing elements 'isloading', 'propname', 'componentname'.

Those elements have the following types:

• is_loading (Bool; optional): Determines if the component is loading or not
• prop_name (String; optional): Holds which property is loading
• component_name (String; optional): Holds the name of the component that is loading
• n_clicks (Real; optional): An integer that represents the number of times

that this element has been clicked on.

• n_clicks_timestamp (Real; optional): An integer that represents the time (in ms since 1970)

at which n_clicks changed. This can be used to tell which button was changed most recently.

• style (Dict; optional): Defines CSS styles which will override styles previously set.
• target (String; optional): Target attribute to pass on to the link. Only applies to external links.

dbc_offcanvas(;kwargs...)
dbc_offcanvas(children::Any;kwargs...)
dbc_offcanvas(children_maker::Function;kwargs...)

An Offcanvas component. Create a toggleable hidden sidebar using the Offcanvas component. Toggle the visibility with the is_open prop. Keyword arguments:

• children (a list of or a singular dash component, string or number; optional): The children of this component
• 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.

• autoFocus (Bool; optional): DEPRECATED Use autofocus instead

Puts the focus on the modal when initialized.

• autofocus (Bool; optional): Puts the focus on the offcanvas when initialized.
• backdrop (Bool | a value equal to: 'static'; optional): Includes an offcanvas-backdrop element. Alternatively, specify 'static' for a

backdrop which doesn't close the modal on click.

• backdropClassName (String; optional): DEPRECATED - Use backdropclassname instead.

CSS class to apply to the backdrop.

• backdrop_class_name (String; optional): CSS class to apply to the backdrop.
• className (String; optional): DEPRECATED - Use class_name instead.

Often used with CSS to style elements with common properties.

• class_name (String; optional): Often used with CSS to style elements with common properties.
• close_button (Bool; optional): Specify whether the Component should contain a close button

in the header

• is_open (Bool; optional): Whether offcanvas is currently open.
• keyboard (Bool; optional): Close the offcanvas when escape key is pressed.
• labelledBy (String; optional): DEPRECATED Use labelledby instead

The ARIA labelledby attribute

• labelledby (String; optional): The ARIA labelledby attribute
• loading_state (optional): Object that holds the loading state object coming from dash-renderer. loadingstate has the following type: lists containing elements 'isloading', 'propname', 'componentname'.

Those elements have the following types:

• is_loading (Bool; optional): Determines if the component is loading or not
• prop_name (String; optional): Holds which property is loading
• component_name (String; optional): Holds the name of the component that is loading
• placement (a value equal to: 'start', 'end', 'top', 'bottom'; optional): Which side of the viewport the offcanvas will appear from.
• scrollable (Bool; optional): Allow body scrolling while offcanvas is open.
• style (Dict; optional): Defines CSS styles which will override styles previously set.
• title (a list of or a singular dash component, string or number; optional): The header title

dbc_pagination(;kwargs...)

A Pagination component. The container for presentational components for building a pagination UI. Individual pages should be added as children using the PaginationItem component. Keyword arguments:

• 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.

• active_page (Real; optional): The currently active page
• className (String; optional): DEPRECATED - Use class_name instead.

Often used with CSS to style elements with common properties.

• class_name (String; optional): Often used with CSS to style elements with common properties.
• first_last (Bool; optional): When True, this will display a first and last icon at the beginning

and end of the component.

• fully_expanded (Bool; optional): When True, this will display all numbers between min_value and

max_value.

• loading_state (optional): Object that holds the loading state object coming from dash-renderer. loadingstate has the following type: lists containing elements 'isloading', 'propname', 'componentname'.

Those elements have the following types:

• is_loading (Bool; optional): Determines if the component is loading or not
• prop_name (String; optional): Holds which property is loading
• component_name (String; optional): Holds the name of the component that is loading
• max_value (Real; required): Maximum (rightmost) value to appear in the pagination. Must be defined.

If the min_value and step together cannot reach this value, then the next stepped value is used as the maximum.

• min_value (Real; optional): Minimum (leftmost) value to appear in the pagination.
• previous_next (Bool; optional): When True, this will display a previous and next icon before and after

the individual page numbers.

• size (a value equal to: 'sm', 'lg'; optional): Set the size of all page items in the pagination.
• step (Real; optional): Page increment step.
• style (Dict; optional): Defines CSS styles which will override styles previously set.

dbc_placeholder(;kwargs...)
dbc_placeholder(children::Any;kwargs...)
dbc_placeholder(children_maker::Function;kwargs...)

A Placeholder component. Use loading Placeholders for your components or pages to indicate something may still be loading. Keyword arguments:

• children (a list of or a singular dash component, string or number; optional): The children of this component.
• 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.

• animation (a value equal to: 'glow', 'wave'; optional): Changes the animation of the placeholder.
• button (Bool; optional): Show as a button shape
• className (String; optional): DEPRECATED Use class_name instead.

Often used with CSS to style elements with common properties.

• class_name (String; optional): Often used with CSS to style elements with common properties.
• color (String; optional): Background color, options: primary, secondary, success, info, warning, danger,

light, dark.

• delay_hide (Real; optional): When using the placeholder as a loading placeholder, add a time delay

(in ms) to the placeholder being removed to prevent flickering.

• delay_show (Real; optional): When using the placeholder as a loading placeholder, add a time delay

(in ms) to the placeholder being shown after the loading_state is set to true.

• key (String; optional): A unique identifier for the component, used to improve

performance by React.js while rendering components See https://reactjs.org/docs/lists-and-keys.html for more info

• lg (Real; optional): Specify placeholder behaviour on a large screen.

Valid arguments are boolean, an integer in the range 1-12 inclusive. See the documentation for more details.

• loading_state (optional): Object that holds the loading state object coming from dash-renderer. loadingstate has the following type: lists containing elements 'isloading', 'propname', 'componentname'.

Those elements have the following types:

• is_loading (Bool; optional): Determines if the component is loading or not
• prop_name (String; optional): Holds which property is loading
• component_name (String; optional): Holds the name of the component that is loading
• md (Real; optional): Specify placeholder behaviour on a medium screen.

Valid arguments are boolean, an integer in the range 1-12 inclusive. See the documentation for more details.

• show_initially (Bool; optional): Whether the Placeholder should show on app start-up before the loading

state has been determined. Default True.

• size (a value equal to: 'xs', 'sm', 'lg'; optional): Component size variations. Only valid when button=false.
• sm (Real; optional): Specify placeholder behaviour on a small screen.

Valid arguments are boolean, an integer in the range 1-12 inclusive. See the documentation for more details.

• style (Dict; optional): Defines CSS styles which will override styles previously set.
• xl (Real; optional): Specify placeholder behaviour on an extra large screen.

Valid arguments are boolean, an integer in the range 1-12 inclusive. See the documentation for more details.

• xs (Real; optional): Specify placeholder behaviour on an extra small screen.

Valid arguments are boolean, an integer in the range 1-12 inclusive. See the documentation for more details.

• xxl (Real; optional): Specify placeholder behaviour on an extra extra large screen.

Valid arguments are boolean, an integer in the range 1-12 inclusive. See the documentation for more details.

dbc_popover(;kwargs...)
dbc_popover(children::Any;kwargs...)
dbc_popover(children_maker::Function;kwargs...)

A Popover component. Popover creates a toggleable overlay that can be used to provide additional information or content to users without having to load a new page or open a new window.

Use the PopoverHeader and PopoverBody components to control the layout of the children. Keyword arguments:

• children (a list of or a singular dash component, string or number; optional): The children of this component
• 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.

• autohide (Bool; optional): Optionally hide popover when hovering over content - default False.
• body (Bool; optional): When body is True, the Popover will render all children in a

PopoverBody automatically.

• className (String; optional): DEPRECATED Use class_name instead.

Often used with CSS to style elements with common properties.

• class_name (String; optional): Often used with CSS to style elements with common properties.
• delay (optional): Optionally override show/hide delays. delay has the following type: lists containing elements 'show', 'hide'.

Those elements have the following types:

• show (Real; optional)
• hide (Real; optional) | Real
• flip (Bool; optional): Whether to flip the direction of the popover if too close to the container

edge, default True.

• hide_arrow (Bool; optional): Hide popover arrow.
• innerClassName (String; optional): DEPRECATED Use inner_class_name instead.

CSS class to apply to the popover.

• inner_class_name (String; optional): CSS class to apply to the popover.
• is_open (Bool; optional): Whether the Popover is open or not.
• key (String; optional): A unique identifier for the component, used to improve

performance by React.js while rendering components See https://reactjs.org/docs/lists-and-keys.html for more info

• loading_state (optional): Object that holds the loading state object coming from dash-renderer. loadingstate has the following type: lists containing elements 'isloading', 'propname', 'componentname'.

Those elements have the following types:

• is_loading (Bool; optional): Determines if the component is loading or not
• prop_name (String; optional): Holds which property is loading
• component_name (String; optional): Holds the name of the component that is loading
• offset (String | Real; optional): Offset of the popover relative to its target. The offset can be passed as

a comma separated pair of values e.g. "0,8", where the first number, skidding, displaces the popover along the reference element. The second number, distance, displaces the popover away from, or toward, the reference element in the direction of its placement. A positive number displaces it further away, while a negative number lets it overlap the reference. See https://popper.js.org/docs/v2/modifiers/offset/ for more info.

Alternatively, you can provide just a single 'distance' number e.g. 8 to displace it horizontally.

• persisted_props (Array of a value equal to: 'is_open's; optional): 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 (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.

• persistence_type (a value equal to: 'local', 'session', 'memory'; optional): 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.

• placement (a value equal to: 'auto', 'auto-start', 'auto-end', 'top', 'top-start', 'top-end', 'right', 'right-start', 'right-end', 'bottom', 'bottom-start', 'bottom-end', 'left', 'left-start', 'left-end'; optional): Specify popover placement.
• style (Dict; optional): Defines CSS styles which will override styles previously set.
• target (String | Dict; optional): ID of the component to attach the popover to.
• trigger (String; optional): Space separated list of triggers (e.g. "click hover focus legacy"). These

specify ways in which the target component can toggle the popover. If not specified you must toggle the popover yourself using callbacks. Options are:

• "click": toggles the popover when the target is clicked.
• "hover": toggles the popover when the target is hovered over with the

cursor.

• "focus": toggles the popover when the target receives focus
• "legacy": toggles the popover when the target is clicked, but will also

dismiss the popover when the user clicks outside of the popover.

dbc_popoverbody(;kwargs...)
dbc_popoverbody(children::Any;kwargs...)
dbc_popoverbody(children_maker::Function;kwargs...)

A PopoverBody component. Componnet for wrapping the body (i.e. main content) of a Popover. Keyword arguments:

• children (a list of or a singular dash component, string or number; optional): The children of this component
• 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.

• className (String; optional): DEPRECATED Use class_name instead.

Often used with CSS to style elements with common properties.

• class_name (String; optional): Often used with CSS to style elements with common properties.
• key (String; optional): A unique identifier for the component, used to improve

performance by React.js while rendering components See https://reactjs.org/docs/lists-and-keys.html for more info

• loading_state (optional): Object that holds the loading state object coming from dash-renderer. loadingstate has the following type: lists containing elements 'isloading', 'propname', 'componentname'.

Those elements have the following types:

• is_loading (Bool; optional): Determines if the component is loading or not
• prop_name (String; optional): Holds which property is loading
• component_name (String; optional): Holds the name of the component that is loading
• style (Dict; optional): Defines CSS styles which will override styles previously set.
• tag (String; optional): HTML tag to use for the PopoverBody, default: div

dbc_popoverheader(;kwargs...)
dbc_popoverheader(children::Any;kwargs...)
dbc_popoverheader(children_maker::Function;kwargs...)

A PopoverHeader component. Creates a header for use inside the Popover component. Keyword arguments:

• children (a list of or a singular dash component, string or number; optional): The children of this component
• 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.

• className (String; optional): DEPRECATED Use class_name instead.

Often used with CSS to style elements with common properties.

• class_name (String; optional): Often used with CSS to style elements with common properties.
• key (String; optional): A unique identifier for the component, used to improve

performance by React.js while rendering components See https://reactjs.org/docs/lists-and-keys.html for more info

• loading_state (optional): Object that holds the loading state object coming from dash-renderer. loadingstate has the following type: lists containing elements 'isloading', 'propname', 'componentname'.

Those elements have the following types:

• is_loading (Bool; optional): Determines if the component is loading or not
• prop_name (String; optional): Holds which property is loading
• component_name (String; optional): Holds the name of the component that is loading
• style (Dict; optional): Defines CSS styles which will override styles previously set.
• tag (String; optional): HTML tag to use for the PopoverHeader, default: h3

dbc_progress(;kwargs...)
dbc_progress(children::Any;kwargs...)
dbc_progress(children_maker::Function;kwargs...)

A Progress component.

Keyword arguments:

• children (a list of or a singular dash component, string or number; optional): The children of this component. Use this to nest progress bars.
• 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.

• animated (Bool; optional): Animate the bar, must have striped set to True to work.
• bar (Bool; optional): Set to True when nesting Progress inside another Progress component to

create a multi-progress bar.

• className (String; optional): DEPRECATED Use class_name instead.

Often used with CSS to style elements with common properties.

• class_name (String; optional): Often used with CSS to style elements with common properties.
• color (String; optional): Set color of the progress bar, options: primary, secondary, success,

warning, danger, info or any valid CSS color of your choice (e.g. a hex code, a decimal code or a CSS color name).

• hide_label (Bool; optional): Set to True to hide the label.
• key (String; optional): A unique identifier for the component, used to improve

performance by React.js while rendering components See https://reactjs.org/docs/lists-and-keys.html for more info

• label (String; optional): Adds a label to the progress bar.
• loading_state (optional): Object that holds the loading state object coming from dash-renderer. loadingstate has the following type: lists containing elements 'isloading', 'propname', 'componentname'.

Those elements have the following types:

• is_loading (Bool; optional): Determines if the component is loading or not
• prop_name (String; optional): Holds which property is loading
• component_name (String; optional): Holds the name of the component that is loading
• max (Real; optional): Upper limit for value, default: 100
• min (Real; optional): Lower limit for value, default: 0
• striped (Bool; optional): Use striped progress bar
• style (Dict; optional): Defines CSS styles which will override styles previously set.
• value (String | Real; optional): Specify progress, value from min to max inclusive.

dbc_radiobutton(;kwargs...)

A RadioButton component. Checklist is a component that encapsulates several checkboxes. The values and labels of the checklist is specified in the options property and the checked items are specified with the value property. Each checkbox is rendered as an input / label pair. Checklist must be given an id to work properly. Keyword arguments:

• 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.

• className (String; optional): DEPRECATED Use class_name instead.

The class of the container (div)

• class_name (String; optional): The class of the container (div)
• disabled (Bool; optional): Disable the RadioButton.
• inputClassName (String; optional): DEPRECATED Use input_class_name instead.

The class of the <input> checkbox element

• inputStyle (Dict; optional): DEPRECATED Use input_style instead.

The style of the <input> checkbox element.

• input_class_name (String; optional): The class of the <input> checkbox element
• input_style (Dict; optional): The style of the <input> checkbox element.
• label (a list of or a singular dash component, string or number; optional): The label of the <input> element
• labelClassName (String; optional): DEPRECATED Use label_class_name instead.

CSS classes to apply to the <label> element for each item.

• labelStyle (Dict; optional): DEPRECATED Use label_style instead.

Inline style arguments to apply to the <label> element for each item.

• label_class_name (String; optional): CSS classes to apply to the <label> element for each item.
• label_id (String; optional): The id of the label
• label_style (Dict; optional): Inline style arguments to apply to the <label> element for each item.
• loading_state (optional): Object that holds the loading state object coming from dash-renderer. loadingstate has the following type: lists containing elements 'isloading', 'propname', 'componentname'.

Those elements have the following types:

• is_loading (Bool; optional): Determines if the component is loading or not
• prop_name (String; optional): Holds which property is loading
• component_name (String; optional): Holds the name of the component that is loading
• name (String; optional): The name of the control, which is submitted with the form data.
• persisted_props (Array of a value equal to: 'value's; optional): 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 (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.

• persistence_type (a value equal to: 'local', 'session', 'memory'; optional): 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.

• style (Dict; optional): The style of the container (div)
• value (Bool; optional): The value of the input.

dbc_radioitems(;kwargs...)

A RadioItems component. RadioItems is a component that encapsulates several radio item inputs. The values and labels of the RadioItems is specified in the options property and the seleced item is specified with the value property. Each radio item is rendered as an input and associated label which are siblings of each other. Keyword arguments:

• 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.

• className (String; optional): DEPRECATED Use class_name instead.

The class of the container (div)

• class_name (String; optional): The class of the container (div)
• inline (Bool; optional): Arrange RadioItems inline
• inputCheckedClassName (String; optional): DEPRECATED Use input_checked_class_name instead.

Additional CSS classes to apply to the <input> element when the corresponding radio is checked.

• inputCheckedStyle (Dict; optional): DEPRECATED Use input_checked_style instead.

Additional inline style arguments to apply to <input> elements on checked items.

• inputClassName (String; optional): DEPRECATED Use input_class_name instead.

The class of the <input> radio element

• inputStyle (Dict; optional): DEPRECATED Use input_style instead.

The style of the <input> radio element

• input_checked_class_name (String; optional): Additional CSS classes to apply to the <input> element when the

corresponding radio is checked.

• input_checked_style (Dict; optional): Additional inline style arguments to apply to <input> elements on checked

items.

• input_class_name (String; optional): The class of the <input> radio element
• input_style (Dict; optional): The style of the <input> radio element
• key (String; optional): A unique identifier for the component, used to improve

performance by React.js while rendering components See https://reactjs.org/docs/lists-and-keys.html for more info

• labelCheckedClassName (String; optional): DEPRECATED Use label_checked_class_name instead.

Additional CSS classes to apply to the <label> element when the corresponding radio is checked.

• labelCheckedStyle (Dict; optional): DEPRECATED Use label_checked_style instead.

Additional inline style arguments to apply to <label> elements on checked items.

• labelClassName (String; optional): DEPRECATED Use label_class_name instead.

CSS classes to apply to the <label> element for each item.

• labelStyle (Dict; optional): DEPRECATED Use label_style instead.

Inline style arguments to apply to the <label> element for each item.

• label_checked_class_name (String; optional): Additional CSS classes to apply to the <label> element when the

corresponding radio is checked.

• label_checked_style (Dict; optional): Additional inline style arguments to apply to <label> elements on checked

items.

• label_class_name (String; optional): CSS classes to apply to the <label> element for each item.
• label_style (Dict; optional): Inline style arguments to apply to the <label> element for each item.
• loading_state (optional): Object that holds the loading state object coming from dash-renderer. loadingstate has the following type: lists containing elements 'isloading', 'propname', 'componentname'.

Those elements have the following types:

• is_loading (Bool; optional): Determines if the component is loading or not
• prop_name (String; optional): Holds which property is loading
• component_name (String; optional): Holds the name of the component that is loading
• name (String; optional): The name of the control, which is submitted with the form data.
• options (optional): The options to display as items in the component. This can be an array

or a dictionary as follows:

1. Array of options where the label and the value are the same thing -

[string|number]

1. An array of options

{
  "label": [string|number],
  "value": [string|number],
  "disabled": [bool] (Optional),
  "input_id": [string] (Optional),
  "label_id": [string] (Optional)
}

1. Simpler options representation in dictionary format. The order is not

guaranteed. All values and labels will be treated as strings.

{"value1": "label1", "value2": "label2", ... }

which is equal to

[
  {"label": "label1", "value": "value1"},
  {"label": "label2", "value": "value2"}, ...
]

. options has the following type: Array of String | Reals | Dict | Array of lists containing elements 'label', 'value', 'disabled', 'inputid', 'labelid'. Those elements have the following types:

• label (a list of or a singular dash component, string or number; required): The radio item's label
• value (String | Real; required): The value of the radio item. This value corresponds to the items

specified in the value property.

• disabled (Bool; optional): If true, this radio item is disabled and can't be clicked on.
• input_id (String; optional): id for this option's input, can be used to attach tooltips or apply

CSS styles

• label_id (String; optional): id for this option's label, can be used to attach tooltips or apply

CSS styless

• persisted_props (Array of a value equal to: 'value's; optional): 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 (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.

• persistence_type (a value equal to: 'local', 'session', 'memory'; optional): 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.

• style (Dict; optional): The style of the container (div)
• switch (Bool; optional): Set to True to render toggle-like switches instead of radios.
• value (String | Real; optional): The currently selected value

dbc_row(;kwargs...)
dbc_row(children::Any;kwargs...)
dbc_row(children_maker::Function;kwargs...)

A Row component. Row is one of the core layout components in Bootstrap. Build up your layout as a series of rows of columns. Row has arguments for controlling the vertical and horizontal alignment of its children, as well as the spacing between columns. Keyword arguments:

• children (a list of or a singular dash component, string or number; optional): The children of this component
• 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.

• align (a value equal to: 'start', 'center', 'end', 'stretch', 'baseline'; optional): Set vertical alignment of columns in this row. Options are 'start',

'center', 'end', 'stretch' and 'baseline'.

• className (String; optional): DEPRECATED Use class_name instead.

Often used with CSS to style elements with common properties.

• class_name (String; optional): Often used with CSS to style elements with common properties.
• justify (a value equal to: 'start', 'center', 'end', 'around', 'between', 'evenly'; optional): Set horizontal spacing and alignment of columns in this row. Options are

'start', 'center', 'end', 'around' and 'between'.

• key (String; optional): A unique identifier for the component, used to improve

performance by React.js while rendering components See https://reactjs.org/docs/lists-and-keys.html for more info

• loading_state (optional): Object that holds the loading state object coming from dash-renderer. loadingstate has the following type: lists containing elements 'isloading', 'propname', 'componentname'.

Those elements have the following types:

• is_loading (Bool; optional): Determines if the component is loading or not
• prop_name (String; optional): Holds which property is loading
• component_name (String; optional): Holds the name of the component that is loading
• style (Dict; optional): Defines CSS styles which will override styles previously set.

dbc_select(;kwargs...)

A Select component. Create a HTML select element with Bootstrap styles. Specify options as a list of dictionaries with keys label, value and disabled. Keyword arguments:

• 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.

• className (String; optional): DEPRECATED Use class_name instead.

Often used with CSS to style elements with common properties.

• class_name (String; optional): Often used with CSS to style elements with common properties.
• disabled (Bool; optional): Set to True to disable the Select.
• html_size (String; optional): This represents the number of rows in the select that should be visible at

one time. It will result in the Select being rendered as a scrolling list box rather than a dropdown.

• invalid (Bool; optional): Apply invalid style to the Input for feedback purposes. This will cause

any FormFeedback in the enclosing div with valid=False to display.

• key (String; optional): A unique identifier for the component, used to improve

performance by React.js while rendering components See https://reactjs.org/docs/lists-and-keys.html for more info

• name (String; optional): The name of the control, which is submitted with the form data.
• options (optional): The options to display as items in the component. This can be an array

or a dictionary as follows:

1. Array of options where the label and the value are the same thing -

[string|number]

1. An array of options

{
  "label": [string|number],
  "value": [string|number],
  "disabled": [bool] (Optional),
  "title": [string] (Optional)
}

1. Simpler options representation in dictionary format. The order is not

guaranteed. All values and labels will be treated as strings.

{"value1": "label1", "value2": "label2", ... }

which is equal to

[
  {"label": "label1", "value": "value1"},
  {"label": "label2", "value": "value2"}, ...
]

. options has the following type: Array of String | Reals | Dict | Array of lists containing elements 'label', 'value', 'disabled', 'title'. Those elements have the following types:

• label (String | Real; required): The options's label
• value (String; required): The value of the option. This value corresponds to the items

specified in the value property.

• disabled (Bool; optional): If true, this checkbox is disabled and can't be clicked on.
• 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/titles

• persisted_props (Array of a value equal to: 'value's; optional): 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 (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.

• persistence_type (a value equal to: 'local', 'session', 'memory'; optional): 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.

• placeholder (String; optional): Placeholder text to display before a selection is made.
• required (a value equal to: 'required', 'REQUIRED' | Bool; optional): This attribute specifies that the user must fill in a value before

submitting a form. It cannot be used when the type attribute is hidden, image, or a button type (submit, reset, or button). The :optional and :required CSS pseudo-classes will be applied to the field as appropriate. required is an HTML boolean attribute - it is enabled by a boolean or 'required'. Alternative capitalizations REQUIRED are also acccepted.

• size (String; optional): Set the size of the Input. Options: 'sm' (small), 'md' (medium)

or 'lg' (large). Default is 'md'.

• style (Dict; optional): Defines CSS styles which will override styles previously set.
• valid (Bool; optional): Apply valid style to the Input for feedback purposes. This will cause

any FormFeedback in the enclosing div with valid=True to display.

• value (String | Real; optional): The value of the currently selected option.

dbc_spinner(;kwargs...)
dbc_spinner(children::Any;kwargs...)
dbc_spinner(children_maker::Function;kwargs...)

A Spinner component. Render Bootstrap style loading spinners using only CSS.

This component can be used standalone to render a loading spinner, or it can be used like dash_core_components.Loading by giving it children. In the latter case the chosen spinner will display while the children are loading. Keyword arguments:

• children (a list of or a singular dash component, string or number; optional): The children of this component.
• 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.

• color (String; optional): Sets the color of the Spinner. Main options are Bootstrap contextual

colors: primary, secondary, success, info, warning, danger, light, dark, body, muted, white-50, black-50. You can also specify any valid CSS color of your choice (e.g. a hex code, a decimal code or a CSS color name)

If not specified will default to text colour.

• delay_hide (Real; optional): When using the spinner as a loading spinner, add a time delay (in ms) to

the spinner being removed to prevent flickering.

• delay_show (Real; optional): When using the spinner as a loading spinner, add a time delay (in ms) to

the spinner being shown after the loading_state is set to true.

• fullscreen (Bool; optional): Boolean that determines if the loading spinner will be displayed

full-screen or not.

• fullscreenClassName (String; optional): DEPRECATED - use fullscreen_class_name instead.

Often used with CSS to style elements with common properties.

• fullscreen_class_name (String; optional): Often used with CSS to style elements with common properties.
• fullscreen_style (Dict; optional): Defines CSS styles for the container when fullscreen=True.
• show_initially (Bool; optional): Whether the Spinner should show on app start-up before the loading state

has been determined. Default True.

• size (String; optional): The spinner size. Options are 'sm', and 'md'.
• spinnerClassName (String; optional): DEPRECATED - use spinner_class_name instead.

CSS class names to apply to the spinner.

• spinner_class_name (String; optional): CSS class names to apply to the spinner.
• spinner_style (Dict; optional): Inline CSS styles to apply to the spinner.
• type (String; optional): The type of spinner. Options 'border' and 'grow'. Default 'border'.

dbc_stack(;kwargs...)
dbc_stack(children::Any;kwargs...)
dbc_stack(children_maker::Function;kwargs...)

A Stack component. Stacks are shorthand helpers that build on top of existing flexbox utilities to make component layout faster and easier than ever. Keyword arguments:

• children (a list of or a singular dash component, string or number; optional): The children of this component
• 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.

• className (String; optional): DEPRECATED Use class_name instead.

Often used with CSS to style elements with common properties.

• class_name (String; optional): Often used with CSS to style elements with common properties.
• direction (a value equal to: 'vertical', 'horizontal'; optional): Which direction to stack the objects in
• gap (Real; optional): Set the spacing between each item (0 - 5)
• key (String; optional): A unique identifier for the component, used to improve

performance by React.js while rendering components See https://reactjs.org/docs/lists-and-keys.html for more info

• loading_state (optional): Object that holds the loading state object coming from dash-renderer. loadingstate has the following type: lists containing elements 'isloading', 'propname', 'componentname'.

Those elements have the following types:

• is_loading (Bool; optional): Determines if the component is loading or not
• prop_name (String; optional): Holds which property is loading
• component_name (String; optional): Holds the name of the component that is loading
• style (Dict; optional): Defines CSS styles which will override styles previously set.

dbc_switch(;kwargs...)

A Switch component. Checklist is a component that encapsulates several checkboxes. The values and labels of the checklist is specified in the options property and the checked items are specified with the value property. Each checkbox is rendered as an input / label pair. Checklist must be given an id to work properly. Keyword arguments:

• 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.

• className (String; optional): DEPRECATED Use class_name instead.

The class of the container (div)

• class_name (String; optional): The class of the container (div)
• disabled (Bool; optional): Disable the Switch.
• inputClassName (String; optional): DEPRECATED Use input_class_name instead.

The class of the <input> checkbox element

• inputStyle (Dict; optional): DEPRECATED Use input_style instead.

The style of the <input> checkbox element.

• input_class_name (String; optional): The class of the <input> checkbox element
• input_style (Dict; optional): The style of the <input> checkbox element.
• label (a list of or a singular dash component, string or number; optional): The label of the <input> element
• labelClassName (String; optional): DEPRECATED Use label_class_name instead.

CSS classes to apply to the <label> element for each item.

• labelStyle (Dict; optional): DEPRECATED Use label_style instead.

Inline style arguments to apply to the <label> element for each item.

• label_class_name (String; optional): CSS classes to apply to the <label> element for each item.
• label_id (String; optional): The id of the label
• label_style (Dict; optional): Inline style arguments to apply to the <label> element for each item.
• loading_state (optional): Object that holds the loading state object coming from dash-renderer. loadingstate has the following type: lists containing elements 'isloading', 'propname', 'componentname'.

Those elements have the following types:

• is_loading (Bool; optional): Determines if the component is loading or not
• prop_name (String; optional): Holds which property is loading
• component_name (String; optional): Holds the name of the component that is loading
• name (String; optional): The name of the control, which is submitted with the form data.
• persisted_props (Array of a value equal to: 'value's; optional): 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 (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.

• persistence_type (a value equal to: 'local', 'session', 'memory'; optional): 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.

• style (Dict; optional): The style of the container (div)
• value (Bool; optional): The value of the input.

dbc_tab(;kwargs...)
dbc_tab(children::Any;kwargs...)
dbc_tab(children_maker::Function;kwargs...)

A Tab component. Create a single tab. Should be used as a component of Tabs. Keyword arguments:

• children (a list of or a singular dash component, string or number; optional): The children of this component
• 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.

• activeLabelClassName (String; optional): DEPRECATED Use active_label_class_name instead

Often used with CSS to style elements with common properties. The classes specified with this prop will be applied to the NavLink in the tab when it is active.

• activeTabClassName (String; optional): DEPRECATED Use active_tab_class_name instead

Often used with CSS to style elements with common properties. The classes specified with this prop will be applied to the NavItem in the tab when it is active.

• active_label_class_name (String; optional): Often used with CSS to style elements with common properties. The classes

specified with this prop will be applied to the NavLink in the tab when it is active.

• active_label_style (Dict; optional): Defines CSS styles which will override styles previously set. The styles

set here apply to the NavLink in the tab when it is active

• active_tab_class_name (String; optional): Often used with CSS to style elements with common properties. The classes

specified with this prop will be applied to the NavItem in the tab when it is active.

• active_tab_style (Dict; optional): Defines CSS styles which will override styles previously set. The styles

set here apply to the NavItem in the tab when it is active.

• className (String; optional): DEPRECATED Use class_name instead.

Often used with CSS to style elements with common properties.

• class_name (String; optional): Often used with CSS to style elements with common properties.
• disabled (Bool; optional): Determines if tab is disabled or not - defaults to false
• key (String; optional): A unique identifier for the component, used to improve

performance by React.js while rendering components See https://reactjs.org/docs/lists-and-keys.html for more info

• label (String; optional): The tab's label, displayed in the tab itself.
• labelClassName (String; optional): DEPRECATED Use label_class_name instead

Often used with CSS to style elements with common properties. The classes specified with this prop will be applied to the NavLink in the tab.

• label_class_name (String; optional): Often used with CSS to style elements with common properties. The classes

specified with this prop will be applied to the NavLink in the tab.

• label_style (Dict; optional): Defines CSS styles which will override styles previously set. The styles

set here apply to the NavLink in the tab.

• loading_state (optional): Object that holds the loading state object coming from dash-renderer. loadingstate has the following type: lists containing elements 'isloading', 'propname', 'componentname'.

Those elements have the following types:

• is_loading (Bool; optional): Determines if the component is loading or not
• prop_name (String; optional): Holds which property is loading
• component_name (String; optional): Holds the name of the component that is loading
• style (Dict; optional): Defines CSS styles which will override styles previously set. The styles

set here apply to the content of the Tab

• tabClassName (String; optional): DEPRECATED Use tab_class_name instead

Often used with CSS to style elements with common properties. The classes specified with this prop will be applied to the NavItem in the tab.

• tab_class_name (String; optional): Often used with CSS to style elements with common properties. The classes

specified with this prop will be applied to the NavItem in the tab.

• tab_id (String; optional): Optional identifier for tab used for determining which tab is visible

if not specified, and Tab is being used inside Tabs component, the tabId will be set to "tab-i" where i is (zero indexed) position of tab in list tabs pased to Tabs component.

• tab_style (Dict; optional): Defines CSS styles which will override styles previously set. The styles

set here apply to the NavItem in the tab.

dbc_table(;kwargs...)
dbc_table(children::Any;kwargs...)
dbc_table(children_maker::Function;kwargs...)

A Table component. A component for applying Bootstrap styles to HTML tables. Use this as a drop-in replacement for html.Table, or generate a table from a Pandas DataFrame using dbc.Table.from_dataframe. Keyword arguments:

• children (a list of or a singular dash component, string or number; optional): The children of this component
• 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.

• bordered (Bool; optional): Apply the table-bordered class which adds borders on all sides of the

table and cells.

• borderless (Bool; optional): Apply the table-borderless class which removes all borders from the

table and cells.

• className (String; optional): DEPRECATED Use class_name instead.

Often used with CSS to style elements with common properties.

• class_name (String; optional): Often used with CSS to style elements with common properties.
• color (String; optional): Table color, options: primary, secondary, success, info, warning, danger,

dark, light. Default: secondary.

• dark (Bool; optional): DEPRECATED - Use color="dark" instead.

Apply the table-dark class for dark cell backgrounds and light text.

• hover (Bool; optional): Apply the table-hover class which enables a hover state on table rows

within the table body.

• key (String; optional): A unique identifier for the component, used to improve

performance by React.js while rendering components See https://reactjs.org/docs/lists-and-keys.html for more info

• loading_state (optional): Object that holds the loading state object coming from dash-renderer. loadingstate has the following type: lists containing elements 'isloading', 'propname', 'componentname'.

Those elements have the following types:

• is_loading (Bool; optional): Determines if the component is loading or not
• prop_name (String; optional): Holds which property is loading
• component_name (String; optional): Holds the name of the component that is loading
• responsive (Bool | String; optional): Set to True or one of the breakpoints 'sm', 'md', 'lg', 'xl' to make table

scroll horizontally at lower breakpoints.

• size (String; optional): Specify table size, options: 'sm', 'md', 'lg'
• striped (Bool; optional): Apply the table-striped class which applies 'zebra striping' to rows in

the table body.

• style (Dict; optional): Defines CSS styles which will override styles previously set.

dbc_tabs(;kwargs...)
dbc_tabs(children::Any;kwargs...)
dbc_tabs(children_maker::Function;kwargs...)

A Tabs component. Create Bootstrap styled tabs. Use the active_tab property to set, or get get the currently active tab in a callback. Keyword arguments:

• children (a list of or a singular dash component, string or number; optional): The children of this component
• 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.

• active_tab (String; optional): The tabid of the currently active tab. If tabid has not been specified

for the active tab, this will default to tab-i, where i is the index (starting from 0) of the tab.

• className (String; optional): DEPRECATED Use class_name instead.

Often used with CSS to style elements with common properties.

• class_name (String; optional): Often used with CSS to style elements with common properties.
• key (String; optional): A unique identifier for the component, used to improve

performance by React.js while rendering components See https://reactjs.org/docs/lists-and-keys.html for more info

• loading_state (optional): Object that holds the loading state object coming from dash-renderer. loadingstate has the following type: lists containing elements 'isloading', 'propname', 'componentname'.

Those elements have the following types:

• is_loading (Bool; optional): Determines if the component is loading or not
• prop_name (String; optional): Holds which property is loading
• component_name (String; optional): Holds the name of the component that is loading
• persisted_props (Array of a value equal to: 'active_tab's; optional): Properties whose user interactions will persist after refreshing the

component or the page. Since only active_tab is allowed this prop can normally be ignored.

• 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.

• persistence_type (a value equal to: 'local', 'session', 'memory'; optional): 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.

• style (Dict; optional): Defines CSS styles which will override styles previously set.

dbc_textarea(;kwargs...)

A Textarea component. A basic HTML textarea for entering multiline text based on the corresponding component in dash-core-components Keyword arguments:

• 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.

• accessKey (String; optional): DEPRECATED Use accesskey instead

Defines a keyboard shortcut to activate or add focus to the element.

• accesskey (String; optional): Defines a keyboard shortcut to activate or add focus to the element.
• autoFocus (String; optional): DEPRECATED Use autofocus instead

The element should be automatically focused after the page loaded.

• autofocus (String; optional): The element should be automatically focused after the page loaded.
• className (String; optional): DEPRECATED Use class_name instead.

Often used with CSS to style elements with common properties.

• class_name (String; optional): Often used with CSS to style elements with common properties.
• cols (String | Real; optional): Defines the number of columns in a textarea.
• contentEditable (String | Real; optional): DEPRECATED Use contenteditable instead

Indicates whether the element's content is editable.

• contenteditable (String | Real; optional): Indicates whether the element's content is editable.
• contextMenu (String; optional): DEPRECATED Use contextmenu instead

Defines the ID of a <menu> element which will serve as the element's context menu.

• contextmenu (String; optional): Defines the ID of a <menu> element which will serve as the element's context menu.
• debounce (Bool; optional): If true, changes to input will be sent back to the Dash server only on enter or when losing focus.

If it's false, it will sent the value back on every change.

• dir (String; optional): Defines the text direction. Allowed values are ltr (Left-To-Right) or rtl (Right-To-Left)
• disabled (String | Bool; optional): Indicates whether the user can interact with the element.
• draggable (a value equal to: 'true', 'false' | Bool; optional): Defines whether the element can be dragged.
• form (String; optional): Indicates the form that is the owner of the element.
• hidden (String; optional): Prevents rendering of given element, while keeping child elements, e.g. script elements, active.
• invalid (Bool; optional): Apply invalid style to the Textarea for feedback purposes. This will cause

any FormFeedback in the enclosing div with valid=False to display.

• key (String; optional): A unique identifier for the component, used to improve

performance by React.js while rendering components See https://reactjs.org/docs/lists-and-keys.html for more info

• lang (String; optional): Defines the language used in the element.
• loading_state (optional): Object that holds the loading state object coming from dash-renderer. loadingstate has the following type: lists containing elements 'isloading', 'propname', 'componentname'.

Those elements have the following types:

• is_loading (Bool; optional): Determines if the component is loading or not
• prop_name (String; optional): Holds which property is loading
• component_name (String; optional): Holds the name of the component that is loading
• maxLength (String | Real; optional): DEPRECATED Use maxlength instead

Defines the maximum number of characters allowed in the element.

• maxlength (String | Real; optional): Defines the maximum number of characters allowed in the element.
• minLength (String | Real; optional): DEPRECATED Use minlength instead

Defines the minimum number of characters allowed in the element.

• minlength (String | Real; optional): Defines the minimum number of characters allowed in the element.
• n_blur (Real; optional): Number of times the input lost focus.
• n_blur_timestamp (Real; optional): Last time the input lost focus.
• n_clicks (Real; optional): An integer that represents the number of times

that this element has been clicked on.

• n_clicks_timestamp (Real; optional): An integer that represents the time (in ms since 1970)

at which n_clicks changed. This can be used to tell which button was changed most recently.

• n_submit (Real; optional): Number of times the Enter key was pressed while the textarea had focus.
• n_submit_timestamp (Real; optional): Last time that Enter was pressed.
• name (String; optional): Name of the element. For example used by the server to identify the fields in form submits.
• persisted_props (Array of a value equal to: 'value's; optional): 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 (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.

• persistence_type (a value equal to: 'local', 'session', 'memory'; optional): 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.

• placeholder (String; optional): Provides a hint to the user of what can be entered in the field.
• readOnly (Bool | a value equal to: 'readOnly', 'readonly', 'READONLY'; optional): DEPRECATED Use readonly instead

Indicates whether the element can be edited.

• readonly (Bool | a value equal to: 'readOnly', 'readonly', 'READONLY'; optional): Indicates whether the element can be edited.
• required (a value equal to: 'required', 'REQUIRED' | Bool; optional): This attribute specifies that the user must fill in a value before

submitting a form. It cannot be used when the type attribute is hidden, image, or a button type (submit, reset, or button). The :optional and :required CSS pseudo-classes will be applied to the field as appropriate. required is an HTML boolean attribute - it is enabled by a boolean or 'required'. Alternative capitalizations REQUIRED are also acccepted.

• rows (String | Real; optional): Defines the number of rows in a text area.
• size (String; optional): Set the size of the Textarea, valid options are 'sm', 'md', or 'lg'
• spellCheck (a value equal to: 'true', 'false' | Bool; optional): DEPRECATED Use spellcheck instead

Indicates whether spell checking is allowed for the element.

• spellcheck (a value equal to: 'true', 'false' | Bool; optional): Indicates whether spell checking is allowed for the element.
• style (Dict; optional): Defines CSS styles which will override styles previously set.
• tabIndex (String | Real; optional): DEPRECATED Use tabindex instead

Overrides the browser's default tab order and follows the one specified instead.

• tabindex (String | Real; optional): Overrides the browser's default tab order and follows the one specified instead.
• title (String; optional): Text to be displayed in a tooltip when hovering over the element.
• valid (Bool; optional): Apply valid style to the Textarea for feedback purposes. This will cause

any FormFeedback in the enclosing div with valid=True to display.

• value (String; optional): The value of the textarea
• wrap (String; optional): Indicates whether the text should be wrapped.

dbc_toast(;kwargs...)
dbc_toast(children::Any;kwargs...)
dbc_toast(children_maker::Function;kwargs...)

A Toast component. Toasts can be used to push messages and notifactions to users. Control visibility of the toast with the is_open prop, or use duration to set a timer for auto-dismissal. Keyword arguments:

• children (a list of or a singular dash component, string or number; optional): The children of this component
• 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.

• bodyClassName (String; optional): DEPRECATED - use body_class_name instead.

Often used with CSS to style elements with common properties. The classes specified with this prop will be applied to the body of the toast.

• body_class_name (String; optional): Often used with CSS to style elements with common properties. The classes

specified with this prop will be applied to the body of the toast.

• body_style (Dict; optional): Defines CSS styles which will override styles previously set. The styles

set here apply to the body of the toast.

• className (String; optional): DEPRECATED Use class_name instead.

Often used with CSS to style elements with common properties.

• class_name (String; optional): Often used with CSS to style elements with common properties.
• color (String; optional): Toast color, options: primary, secondary, success, info, warning, danger,

light, dark. Default: secondary.

• dismissable (Bool; optional): Set to True to add a dismiss button to the header which will close the

toast on click

• duration (Real; optional): Duration in milliseconds after which the Alert dismisses itself.
• header (a list of or a singular dash component, string or number; optional): Text to populate the header with
• headerClassName (String; optional): DEPRECATED - use header_class_name instead

Often used with CSS to style elements with common properties. The classes specified with this prop will be applied to the header of the toast.

• header_class_name (String; optional): Often used with CSS to style elements with common properties. The classes

specified with this prop will be applied to the header of the toast.

• header_style (Dict; optional): Defines CSS styles which will override styles previously set. The styles

set here apply to the header of the toast.

• icon (String; optional): Add a contextually coloured icon to the header of the toast. Options are:

"primary", "secondary", "success", "warning", "danger", "info", "light" or "dark".

• is_open (Bool; optional): Whether Toast is currently open.
• key (String; optional): A unique identifier for the component, used to improve

performance by React.js while rendering components See https://reactjs.org/docs/lists-and-keys.html for more info

• loading_state (optional): Object that holds the loading state object coming from dash-renderer. loadingstate has the following type: lists containing elements 'isloading', 'propname', 'componentname'.

Those elements have the following types:

• is_loading (Bool; optional): Determines if the component is loading or not
• prop_name (String; optional): Holds which property is loading
• component_name (String; optional): Holds the name of the component that is loading
• n_dismiss (Real; optional): An integer that represents the number of times that the dismiss button has

been clicked on.

• n_dismiss_timestamp (Real; optional): Use of *timestamp props has been deprecated in Dash in favour of dash.callbackcontext.

See "How do I determine which Input has changed?" in the Dash FAQs https://dash.plot.ly/faqs.

An integer that represents the time (in ms since 1970) at which n_dismiss changed. This can be used to tell which button was changed most recently.

• persisted_props (Array of a value equal to: 'is_open's; optional): 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 (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.

• persistence_type (a value equal to: 'local', 'session', 'memory'; optional): 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.

• style (Dict; optional): Defines CSS styles which will override styles previously set.
• tag (String; optional): HTML tag to use for the Toast, default: div

dbc_tooltip(;kwargs...)
dbc_tooltip(children::Any;kwargs...)
dbc_tooltip(children_maker::Function;kwargs...)

A Tooltip component. A component for adding tooltips to any element, no callbacks required!

Simply add the Tooltip to you layout, and give it a target (id of a component to which the tooltip should be attached) Keyword arguments:

• children (a list of or a singular dash component, string or number; optional): The children of this component
• 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.

• autohide (Bool; optional): Optionally hide tooltip when hovering over tooltip content - default True.
• className (String; optional): DEPRECATED Use class_name instead.

Often used with CSS to style elements with common properties.

• class_name (String; optional): Often used with CSS to style elements with common properties.
• delay (optional): Control the delay of hide and show events.. delay has the following type: lists containing elements 'show', 'hide'.

Those elements have the following types:

• show (Real; optional)
• hide (Real; optional)
• fade (Bool; optional): If True, a fade animation will be applied when is_open is toggled. If

False the Alert will simply appear and disappear.

• flip (Bool; optional): Whether to flip the direction of the popover if too close to the container

edge, default True.

• is_open (Bool; optional): Whether the Tooltip is open or not.
• key (String; optional): A unique identifier for the component, used to improve

performance by React.js while rendering components See https://reactjs.org/docs/lists-and-keys.html for more info

• loading_state (optional): Object that holds the loading state object coming from dash-renderer. loadingstate has the following type: lists containing elements 'isloading', 'propname', 'componentname'.

Those elements have the following types:

• is_loading (Bool; optional): Determines if the component is loading or not
• prop_name (String; optional): Holds which property is loading
• component_name (String; optional): Holds the name of the component that is loading
• placement (a value equal to: 'auto', 'auto-start', 'auto-end', 'top', 'top-start', 'top-end', 'right', 'right-start', 'right-end', 'bottom', 'bottom-start', 'bottom-end', 'left', 'left-start', 'left-end'; optional): How to place the tooltip.
• style (Dict; optional): Defines CSS styles which will override styles previously set.
• target (String | Dict; optional): The id of the element to attach the tooltip to
• trigger (String; optional): Space separated list of triggers (e.g. "click hover focus legacy"). These

specify ways in which the target component can toggle the tooltip. If omitted you must toggle the tooltip yourself using callbacks. Options are:

• "click": toggles the popover when the target is clicked.
• "hover": toggles the popover when the target is hovered over with the

cursor.

• "focus": toggles the popover when the target receives focus
• "legacy": toggles the popover when the target is clicked, but will also

dismiss the popover when the user clicks outside of the popover.

Default is "hover focus"