Package 'muiMaterial'

Description

https://mui.com/material-ui/api/accordion/

Usage

Accordion(...)

Arguments

Details

• children node
  Default is - The content of the component.

• classes object
  Default is - Override or extend the styles applied to the component.See CSS classes API below for more details.

• defaultExpanded bool
  Default is FALSE If true, expands the accordion by default.

• disabled bool
  Default is FALSE If true, the component is disabled.

• disableGutters bool
  Default is FALSE If true, it removes the margin between two expanded accordion items and the increase of height.

• expanded bool
  Default is - If true, expands the accordion, otherwise collapse it. Setting this prop enables control over the accordion.

• onChange func
  Default is - Callback fired when the expand/collapse state is changed.Signature:function(event: React.SyntheticEvent, expanded: boolean) = voidevent The event source of the callback. Warning: This is a generic event not a change event.expanded The expanded state of the accordion.

• slotProps ⁠{ heading?: func| object, root?: func| object, transition?: func| object }⁠
  Default is The props used for each slot inside.

• slots ⁠{ heading?: elementType, root?: elementType, transition?: elementType }⁠
  Default is The components used for each slot inside.

• square bool
  Default is FALSE If true, rounded corners are disabled.

• sx ⁠Array func| object| bool | func| object⁠
  Default is - The system prop that allows defining system overrides as well as additional CSS styles.See the sx page for more details.

• TransitionComponent elementType
  Default is - The component used for the transition. Follow this guide to learn more about the requirements for this component.Deprecated Use slots.transition instead. This prop will be removed in a future major release. See Migrating from deprecated APIs for more details.

• TransitionProps object
  Default is - Props applied to the transition element. By default, the element is based on this Transition component.Deprecated Use slotProps.transition instead. This prop will be removed in a future major release. See Migrating from deprecated APIs for more details.

Value

Object with shiny.tag class suitable for use in the UI of a Shiny app.

Description

https://mui.com/material-ui/api/accordion-actions/

Usage

AccordionActions(...)

Arguments

Details

• children node
  Default is - The content of the component.

• classes object
  Default is - Override or extend the styles applied to the component.See CSS classes API below for more details.

• disableSpacing bool
  Default is FALSE If true, the actions do not have additional margin.

• sx ⁠Array func| object| bool | func| object⁠
  Default is - The system prop that allows defining system overrides as well as additional CSS styles.See the sx page for more details.

Value

Object with shiny.tag class suitable for use in the UI of a Shiny app.

Description

https://mui.com/material-ui/api/accordion-details/

Usage

AccordionDetails(...)

Arguments

Details

• children node
  Default is NA The content of the component.

• classes object
  Default is NA Override or extend the styles applied to the component.See CSS classes API below for more details.

• sx ⁠Array func| object| bool | func| object⁠
  Default is NA The system prop that allows defining system overrides as well as additional CSS styles.See the sx page for more details.

Value

Object with shiny.tag class suitable for use in the UI of a Shiny app.

Description

https://mui.com/material-ui/api/accordion-summary/

Usage

AccordionSummary(...)

Arguments

Details

• children node
  Default is - The content of the component.

• classes object
  Default is - Override or extend the styles applied to the component.See CSS classes API below for more details.

• expandIcon node
  Default is - The icon to display as the expand indicator.

• focusVisibleClassName string
  Default is - This prop can help identify which element has keyboard focus. The class name will be applied when the element gains the focus through keyboard interaction. It's a polyfill for the CSS :focus-visible selector. The rationale for using this feature is explained here. A polyfill can be used to apply a focus-visible class to other components if needed.

• slotProps ⁠{ content?: func| object, expandIconWrapper?: func| object, root?: func| object }⁠
  Default is The props used for each slot inside.

• slots ⁠{ content?: elementType, expandIconWrapper?: elementType, root?: elementType }⁠
  Default is The components used for each slot inside.

• sx ⁠Array func| object| bool | func| object⁠
  Default is - The system prop that allows defining system overrides as well as additional CSS styles.See the sx page for more details.

Value

Object with shiny.tag class suitable for use in the UI of a Shiny app.

Description

https://mui.com/material-ui/api/alert/

Usage

Alert(...)

Arguments

Details

• action node
  Default is - The action to display. It renders after the message, at the end of the alert.

• children node
  Default is - The content of the component.

• classes object
  Default is - Override or extend the styles applied to the component.See CSS classes API below for more details.

• closeText string
  Default is 'Close' Override the default label for the close popup icon button.For localization purposes, you can use the provided translations.

• color 'error'| 'info'| 'success'| 'warning'| string
  Default is - The color of the component. Unless provided, the value is taken from the severity prop. It supports both default and custom theme colors, which can be added as shown in the palette customization guide.

• components ⁠{ CloseButton?: elementType, CloseIcon?: elementType }⁠
  Default is The components used for each slot inside.Deprecated use the slots prop instead. This prop will be removed in a future major release. See Migrating from deprecated APIs for more details.

• componentsProps ⁠{ closeButton?: object, closeIcon?: object }⁠
  Default is The extra props for the slot components. You can override the existing props or add new ones.Deprecated use the slotProps prop instead. This prop will be removed in a future major release. See Migrating from deprecated APIs for more details.

• icon node
  Default is - Override the icon displayed before the children. Unless provided, the icon is mapped to the value of the severity prop. Set to false to remove the icon.

• iconMapping ⁠{ error?: node, info?: node, success?: node, warning?: node }⁠
  Default is - The component maps the severity prop to a range of different icons, for instance success to successoutlined. If you wish to change this mapping, you can provide your own. Alternatively, you can use the icon prop to override the icon displayed.

• onClose func
  Default is - Callback fired when the component requests to be closed. When provided and no action prop is set, a close icon button is displayed that triggers the callback when clicked.Signature:function(event: React.SyntheticEvent) = voidevent The event source of the callback.

• role string
  Default is 'alert' The ARIA role attribute of the element.

• severity 'error'| 'info'| 'success'| 'warning'| string
  Default is 'success' The severity of the alert. This defines the color and icon used.

• slotProps ⁠{ action?: func| object, closeButton?: func| object, closeIcon?: func| object, icon?: func| object, message?: func| object, root?: func| object }⁠
  Default is The props used for each slot inside.

• slots ⁠{ action?: elementType, closeButton?: elementType, closeIcon?: elementType, icon?: elementType, message?: elementType, root?: elementType }⁠
  Default is The components used for each slot inside.

• sx ⁠Array func| object| bool | func| object⁠
  Default is - The system prop that allows defining system overrides as well as additional CSS styles.See the sx page for more details.

• variant 'filled'| 'outlined'| 'standard'| string
  Default is 'standard' The variant to use.

Value

Object with shiny.tag class suitable for use in the UI of a Shiny app.

Description

https://mui.com/material-ui/api/alert-title/

Usage

AlertTitle(...)

Arguments

Details

• children node
  Default is NA The content of the component.

• classes object
  Default is NA Override or extend the styles applied to the component.See CSS classes API below for more details.

• sx ⁠Array func| object| bool | func| object⁠
  Default is NA The system prop that allows defining system overrides as well as additional CSS styles.See the sx page for more details.

Value

Object with shiny.tag class suitable for use in the UI of a Shiny app.

Description

https://mui.com/material-ui/api/app-bar/

Usage

AppBar(...)

Arguments

Details

• children node
  Default is - The content of the component.

• classes object
  Default is - Override or extend the styles applied to the component.See CSS classes API below for more details.

• color 'default'| 'inherit'| 'primary'| 'secondary'| 'transparent'| 'error'| 'info'| 'success'| 'warning'| string
  Default is 'primary' The color of the component. It supports both default and custom theme colors, which can be added as shown in the palette customization guide.

• enableColorOnDark bool
  Default is FALSE If true, the color prop is applied in dark mode.

• position 'absolute'| 'fixed'| 'relative'| 'static'| 'sticky'
  Default is 'fixed' The positioning type. The behavior of the different options is described in the MDN web docs. Note: sticky is not universally supported and will fall back to static when unavailable.

• sx ⁠Array func| object| bool | func| object⁠
  Default is - The system prop that allows defining system overrides as well as additional CSS styles.See the sx page for more details.

Value

Object with shiny.tag class suitable for use in the UI of a Shiny app.

Description

https://mui.com/material-ui/api/autocomplete/

MUI's Autocomplete requires a renderInput function prop, which R cannot express directly. The R wrapper resolves the input in this order:

1. renderInput — pass an explicit JS() callback for full control.

2. A child element (e.g. TextField(...), OutlinedInput(...)) — it is cloned and receives the params from MUI automatically. This is the recommended path: it stays close to the MUI API and survives upstream changes without touching R user code.

3. inputProps — a named list of props forwarded to a default TextField. Kept for backward compatibility with older examples.

Usage

Autocomplete(...)

Autocomplete.shinyInput(inputId, ..., value = NULL)

updateAutocomplete.shinyInput(
  session = shiny::getDefaultReactiveDomain(),
  inputId,
  ...
)

Arguments

Details

• options array
  Default is - A list of options that will be shown in the Autocomplete.

• renderInput func
  Default is - Render the input.Signature:function(params: object) = ReactNode

• autoComplete bool
  Default is FALSE If true, the portion of the selected suggestion that the user hasn't typed, known as the completion string, appears inline after the input cursor in the textbox. The inline completion string is visually highlighted and has a selected state.

• autoHighlight bool
  Default is FALSE If true, the first option is automatically highlighted.

• autoSelect bool
  Default is FALSE If true, the selected option becomes the value of the input when the Autocomplete loses focus unless the user chooses a different option or changes the character string in the input.When using the freeSolo mode, the typed value will be the input value if the Autocomplete loses focus without highlighting an option.

• blurOnSelect 'mouse'| 'touch'| bool
  Default is FALSE Control if the input should be blurred when an option is selected: false the input is not blurred. true the input is always blurred. touch the input is blurred after a touch event. mouse the input is blurred after a mouse event.

• ChipProps object
  Default is - Props applied to the Chip element.Deprecated Use slotProps.chip instead. This prop will be removed in a future major release. See Migrating from deprecated APIs for more details.

• classes object
  Default is - Override or extend the styles applied to the component.See CSS classes API below for more details.

• clearIcon node
  Default is ClearIcon fontSize="small". The icon to display in place of the default clear icon.

• clearOnBlur bool
  Default is !props.freeSolo If true, the input's text is cleared on blur if no value is selected.Set it to true if you want to help the user enter a new value. Set it to false if you want to help the user resume their search.

• clearOnEscape bool
  Default is FALSE If true, clear all values when the user presses escape and the popup is closed.

• clearText string
  Default is 'Clear' Override the default text for the clear icon button.For localization purposes, you can use the provided translations.

• closeText string
  Default is 'Close' Override the default text for the close popup icon button.For localization purposes, you can use the provided translations.

• componentsProps ⁠{ clearIndicator?: object, paper?: object, popper?: object, popupIndicator?: object }⁠
  Default is - The props used for each slot inside.Deprecated Use the slotProps prop instead. This prop will be removed in a future major release. See Migrating from deprecated APIs for more details.

• defaultValue any
  Default is props.multiple ? [] : null The default value. Use when the component is not controlled.

• disableClearable bool
  Default is FALSE If true, the input can't be cleared.

• disableCloseOnSelect bool
  Default is FALSE If true, the popup won't close when a value is selected.

• disabled bool
  Default is FALSE If true, the component is disabled.

• disabledItemsFocusable bool
  Default is FALSE If true, will allow focus on disabled items.

• disableListWrap bool
  Default is FALSE If true, the list box in the popup will not wrap focus.

• disablePortal bool
  Default is FALSE If true, the Popper content will be under the DOM hierarchy of the parent component.

• filterOptions func
  Default is createFilterOptions() A function that determines the filtered options to be rendered on search.Signature:function(options: Array, state: object) = Arrayoptions The options to render.state The state of the component.

• filterSelectedOptions bool
  Default is FALSE If true, hide the selected options from the list box.

• forcePopupIcon 'auto'| bool
  Default is 'auto' Force the visibility display of the popup icon.

• freeSolo bool
  Default is FALSE If true, the Autocomplete is free solo, meaning that the user input is not bound to provided options.

• fullWidth bool
  Default is FALSE If true, the input will take up the full width of its container.

• getLimitTagsText func
  Default is (more) = ⁠+$more⁠ The label to display when the tags are truncated (limitTags).Signature:function(more: number) = ReactNodemore The number of truncated tags.

• getOptionDisabled func
  Default is - Used to determine the disabled state for a given option.Signature:function(option: Value) = booleanoption The option to test.

• getOptionKey func
  Default is - Used to determine the key for a given option. This can be useful when the labels of options are not unique (since labels are used as keys by default).Signature:function(option: Value) = string | numberoption The option to get the key for.

• getOptionLabel func
  Default is (option) = option.label ?? option Used to determine the string value for a given option. It's used to fill the input (and the list box options if renderOption is not provided).If used in free solo mode, it must accept both the type of the options and a string.Signature:function(option: Value) = string

• groupBy func
  Default is - If provided, the options will be grouped under the returned string. The groupBy value is also used as the text for group headings when renderGroup is not provided.Signature:function(option: Value) = stringoption The Autocomplete option.

• handleHomeEndKeys bool
  Default is !props.freeSolo If true, the component handles the "Home" and "End" keys when the popup is open. It should move focus to the first option and last option, respectively.

• id string
  Default is - This prop is used to help implement the accessibility logic. If you don't provide an id it will fall back to a randomly generated one.

• includeInputInList bool
  Default is FALSE If true, the highlight can move to the input.

• inputValue string
  Default is - The input value.

• isOptionEqualToValue func
  Default is - Used to determine if the option represents the given value. Uses strict equality by default. Both arguments need to be handled, an option can only match with one value.Signature:function(option: Value, value: Value) = booleanoption The option to test.value The value to test against.

• limitTags integer
  Default is -1 The maximum number of tags that will be visible when not focused. Set -1 to disable the limit.

• ListboxComponent elementType
  Default is 'ul' The component used to render the listbox.Deprecated Use slotProps.listbox.component instead. This prop will be removed in a future major release. See Migrating from deprecated APIs for more details.

• ListboxProps object
  Default is - Props applied to the Listbox element.Deprecated Use slotProps.listbox instead. This prop will be removed in a future major release. See Migrating from deprecated APIs for more details.

• loading bool
  Default is FALSE If true, the component is in a loading state. This shows the loadingText in place of suggestions (only if there are no suggestions to show, for example options are empty).

• loadingText node
  Default is 'Loading80' Text to display when in a loading state.For localization purposes, you can use the provided translations.

• multiple bool
  Default is FALSE If true, value must be an array and the menu will support multiple selections.

• noOptionsText node
  Default is 'No options' Text to display when there are no options.For localization purposes, you can use the provided translations.

• onChange func
  Default is - Callback fired when the value changes.Signature:function(event: React.SyntheticEvent, value: Value | Array, reason: string, details?: string) = voidevent The event source of the callback.value The new value of the component.reason One of "createOption", "selectOption", "removeOption", "blur" or "clear".

• onClose func
  Default is - Callback fired when the popup requests to be closed. Use in controlled mode (see open).Signature:function(event: React.SyntheticEvent, reason: string) = voidevent The event source of the callback.reason Can be: "toggleInput", "escape", "selectOption", "removeOption", "blur".

• onHighlightChange func
  Default is - Callback fired when the highlight option changes.Signature:function(event: React.SyntheticEvent, option: Value, reason: string) = voidevent The event source of the callback.option The highlighted option.reason Can be: "keyboard", "mouse", "touch".

• onInputChange func
  Default is - Callback fired when the input value changes.Signature:function(event: React.SyntheticEvent, value: string, reason: string) = voidevent The event source of the callback.value The new value of the text input.reason Can be: "input" (user input), "reset" (programmatic change), "clear", "blur", "selectOption", "removeOption"

• onOpen func
  Default is - Callback fired when the popup requests to be opened. Use in controlled mode (see open).Signature:function(event: React.SyntheticEvent) = voidevent The event source of the callback.

• open bool
  Default is - If true, the component is shown.

• openOnFocus bool
  Default is FALSE If true, the popup will open on input focus.

• openText string
  Default is 'Open' Override the default text for the open popup icon button.For localization purposes, you can use the provided translations.

• PaperComponent elementType
  Default is Paper The component used to render the body of the popup.Deprecated Use slots.paper instead. This prop will be removed in a future major release. See Migrating from deprecated APIs for more details.

• PopperComponent elementType
  Default is Popper The component used to position the popup.Deprecated Use slots.popper instead. This prop will be removed in a future major release. See Migrating from deprecated APIs for more details.

• popupIcon node
  Default is ArrowDropDownIcon. The icon to display in place of the default popup icon.

• readOnly bool
  Default is FALSE If true, the component becomes readonly. It is also supported for multiple tags where the tag cannot be deleted.

• renderGroup func
  Default is - Render the group.Signature:function(params: AutocompleteRenderGroupParams) = ReactNodeparams The group to render.

• renderOption func
  Default is - Render the option, use getOptionLabel by default.Signature:function(props: object, option: Value, state: object, ownerState: object) = ReactNodeprops The props to apply on the li element.option The option to render.state The state of each option.ownerState The state of the Autocomplete component.

• renderTags func
  Default is - Render the selected value.Signature:function(value: Array, getTagProps: function, ownerState: object) = ReactNodevalue The value provided to the component.getTagProps A tag props getter.ownerState The state of the Autocomplete component.

• selectOnFocus bool
  Default is !props.freeSolo If true, the input's text is selected on focus. It helps the user clear the selected value.

• size 'small'| 'medium'| string
  Default is 'medium' The size of the component.

• slotProps ⁠{ chip?: func| object, clearIndicator?: func| object, listbox?: func| object, paper?: func| object, popper?: func| object, popupIndicator?: func| object }⁠
  Default is The props used for each slot inside.

• slots ⁠{ listbox?: elementType, paper?: elementType, popper?: elementType }⁠
  Default is The components used for each slot inside.

• sx ⁠Array func| object| bool | func| object⁠
  Default is - The system prop that allows defining system overrides as well as additional CSS styles.See the sx page for more details.

• value any
  Default is - The value of the autocomplete.The value must have reference equality with the option in order to be selected. You can customize the equality behavior with the isOptionEqualToValue prop.

Value

Object with shiny.tag class suitable for use in the UI of a Shiny app.

Examples

library(shiny)
library(muiMaterial)

ui <- muiMaterialPage(
  CssBaseline(),
  Autocomplete.shinyInput(
    inputId = "auto",
    options = c("Apple", "Banana", "Cherry"),
    TextField(label = "Fruit")
  ),
  verbatimTextOutput("out")
)

server <- function(input, output, session) {
  output$out <- renderPrint(input$auto)
}

shinyApp(ui, server)

Description

https://mui.com/material-ui/api/avatar/

Usage

Avatar(...)

Arguments

Details

• alt string
  Default is - Used in combination with src or srcSet to provide an alt attribute for the rendered img element.

• children node
  Default is - Used to render icon or text elements inside the Avatar if src is not set. This can be an element, or just a string.

• classes object
  Default is - Override or extend the styles applied to the component.See CSS classes API below for more details.

• component elementType
  Default is - The component used for the root node. Either a string to use a HTML element or a component.

• imgProps object
  Default is - Attributes applied to the img element if the component is used to display an image. It can be used to listen for the loading error event.Deprecated Use slotProps.img instead. This prop will be removed in a future major release. See Migrating from deprecated APIs for more details.

• sizes string
  Default is - The sizes attribute for the img element.

• slotProps ⁠{ img?: func| object }⁠
  Default is The props used for each slot inside.

• slots ⁠{ img?: elementType }⁠
  Default is The components used for each slot inside.

• src string
  Default is - The src attribute for the img element.

• srcSet string
  Default is - The srcSet attribute for the img element. Use this attribute for responsive image display.

• sx ⁠Array func| object| bool | func| object⁠
  Default is - The system prop that allows defining system overrides as well as additional CSS styles.See the sx page for more details.

• variant 'circular'| 'rounded'| 'square'| string
  Default is 'circular' The shape of the avatar.

Value

Object with shiny.tag class suitable for use in the UI of a Shiny app.

Description

https://mui.com/material-ui/api/avatar-group/

Usage

AvatarGroup(...)

Arguments

Details

• children node
  Default is - The avatars to stack.

• classes object
  Default is - Override or extend the styles applied to the component.See CSS classes API below for more details.

• component elementType
  Default is - The component used for the root node. Either a string to use a HTML element or a component.

• componentsProps ⁠{ additionalAvatar?: object }⁠
  Default is - The extra props for the slot components. You can override the existing props or add new ones.This prop is an alias for the slotProps prop.Deprecated use the slotProps prop instead. This prop will be removed in a future major release. See Migrating from deprecated APIs for more details.

• max number
  Default is 5 Max avatars to show before +x.

• renderSurplus func
  Default is - custom renderer of extraAvatarsSignature:function(surplus: number) = React.ReactNodesurplus number of extra avatarsReturns: custom element to display

• slotProps ⁠{ additionalAvatar?: object, surplus?: func| object }⁠
  Default is The props used for each slot inside.

• slots ⁠{ surplus?: elementType }⁠
  Default is The components used for each slot inside.

• spacing 'medium'| 'small'| number
  Default is 'medium' Spacing between avatars.

• sx ⁠Array func| object| bool | func| object⁠
  Default is - The system prop that allows defining system overrides as well as additional CSS styles.See the sx page for more details.

• total number
  Default is children.length The total number of avatars. Used for calculating the number of extra avatars.

• variant 'circular'| 'rounded'| 'square'| string
  Default is 'circular' The variant to use.

Value

Object with shiny.tag class suitable for use in the UI of a Shiny app.

Description

https://mui.com/material-ui/api/backdrop/

Usage

Backdrop(...)

Arguments

Details

• open bool
  Default is - If true, the component is shown.

• children node
  Default is - The content of the component.

• classes object
  Default is - Override or extend the styles applied to the component.See CSS classes API below for more details.

• component elementType
  Default is - The component used for the root node. Either a string to use a HTML element or a component.

• components ⁠{ Root?: elementType }⁠
  Default is The components used for each slot inside.Deprecated Use the slots prop instead. This prop will be removed in a future major release. See Migrating from deprecated APIs for more details.

• componentsProps ⁠{ root?: object }⁠
  Default is The extra props for the slot components. You can override the existing props or add new ones.Deprecated Use the slotProps prop instead. This prop will be removed in a future major release. See Migrating from deprecated APIs for more details.

• invisible bool
  Default is FALSE If true, the backdrop is invisible. It can be used when rendering a popover or a custom select component.

• slotProps ⁠{ root?: func| object, transition?: func| object }⁠
  Default is The props used for each slot inside.

• slots ⁠{ root?: elementType, transition?: elementType }⁠
  Default is The components used for each slot inside.

• sx ⁠Array func| object| bool | func| object⁠
  Default is - The system prop that allows defining system overrides as well as additional CSS styles.See the sx page for more details.

• TransitionComponent elementType
  Default is Fade The component used for the transition. Follow this guide to learn more about the requirements for this component.Deprecated Use slots.transition instead. This prop will be removed in a future major release. See Migrating from deprecated APIs for more details.

• transitionDuration ⁠number| { appear?: number, enter?: number, exit?: number }⁠
  Default is - The duration for the transition, in milliseconds. You may specify a single timeout for all transitions, or individually with an object.

Value

Object with shiny.tag class suitable for use in the UI of a Shiny app.

Description

https://mui.com/material-ui/api/badge/

Usage

Badge(...)

Arguments

Details

• anchorOrigin ⁠{ horizontal?: 'left'| 'right', vertical?: 'bottom'| 'top' }⁠
  Default is vertical: 'top', horizontal: 'right', The anchor of the badge.

• badgeContent node
  Default is - The content rendered within the badge.

• children node
  Default is - The badge will be added relative to this node.

• classes object
  Default is - Override or extend the styles applied to the component.See CSS classes API below for more details.

• color 'default'| 'primary'| 'secondary'| 'error'| 'info'| 'success'| 'warning'| string
  Default is 'default' The color of the component. It supports both default and custom theme colors, which can be added as shown in the palette customization guide.

• component elementType
  Default is - The component used for the root node. Either a string to use a HTML element or a component.

• components ⁠{ Badge?: elementType, Root?: elementType }⁠
  Default is The components used for each slot inside.Deprecated use the slots prop instead. This prop will be removed in a future major release. See Migrating from deprecated APIs for more details.

• componentsProps ⁠{ badge?: func| object, root?: func| object }⁠
  Default is The extra props for the slot components. You can override the existing props or add new ones.Deprecated use the slotProps prop instead. This prop will be removed in a future major release. See Migrating from deprecated APIs for more details.

• invisible bool
  Default is FALSE If true, the badge is invisible.

• max number
  Default is 99 Max count to show.

• overlap 'circular'| 'rectangular'
  Default is 'rectangular' Wrapped shape the badge should overlap.

• showZero bool
  Default is FALSE Controls whether the badge is hidden when badgeContent is zero.

• slotProps ⁠{ badge?: func| object, root?: func| object }⁠
  Default is The props used for each slot inside the Badge.

• slots ⁠{ badge?: elementType, root?: elementType }⁠
  Default is The components used for each slot inside the Badge. Either a string to use a HTML element or a component.

• sx ⁠Array func| object| bool | func| object⁠
  Default is - The system prop that allows defining system overrides as well as additional CSS styles.See the sx page for more details.

• variant 'dot'| 'standard'| string
  Default is 'standard' The variant to use.

Value

Object with shiny.tag class suitable for use in the UI of a Shiny app.

Description

https://mui.com/material-ui/api/bottom-navigation/

Usage

BottomNavigation(...)

BottomNavigation.shinyInput(inputId, ..., value = defaultValue)

updateBottomNavigation.shinyInput(
  session = shiny::getDefaultReactiveDomain(),
  inputId,
  ...
)

Arguments

Details

• children node
  Default is - The content of the component.

• classes object
  Default is - Override or extend the styles applied to the component.See CSS classes API below for more details.

• component elementType
  Default is - The component used for the root node. Either a string to use a HTML element or a component.

• onChange func
  Default is - Callback fired when the value changes.Signature:function(event: React.SyntheticEvent, value: any) = voidevent The event source of the callback. Warning: This is a generic event not a change event.value We default to the index of the child.

• showLabels bool
  Default is FALSE If true, all BottomNavigationActions will show their labels. By default, only the selected BottomNavigationAction will show its label.

• sx ⁠Array func| object| bool | func| object⁠
  Default is - The system prop that allows defining system overrides as well as additional CSS styles.See the sx page for more details.

• value any
  Default is - The value of the currently selected BottomNavigationAction.

Value

Object with shiny.tag class suitable for use in the UI of a Shiny app.

Note

Give each child BottomNavigationAction a value; the selected action's value is reported to input[[inputId]]. Pass an initial value matching one of them to pre-select it; when omitted, the component mounts with nothing selected (value = FALSE).

Description

https://mui.com/material-ui/api/bottom-navigation-action/

Usage

BottomNavigationAction(...)

Arguments

Details

• children unsupportedProp
  Default is NA This prop isn't supported. Use the component prop if you need to change the children structure.

• classes object
  Default is NA Override or extend the styles applied to the component.See CSS classes API below for more details.

• icon node
  Default is NA The icon to display.

• label node
  Default is NA The label element.

• showLabel bool
  Default is NA If true, the BottomNavigationAction will show its label. By default, only the selected BottomNavigationAction inside BottomNavigation will show its label.The prop defaults to the value (false) inherited from the parent BottomNavigation component.

• sx ⁠Array func| object| bool | func| object⁠
  Default is NA The system prop that allows defining system overrides as well as additional CSS styles.See the sx page for more details.

• value any
  Default is NA You can provide your own value. Otherwise, we fallback to the child position index.

Value

Object with shiny.tag class suitable for use in the UI of a Shiny app.

Description

https://mui.com/material-ui/api/box/

Usage

Box(...)

Arguments

Details

• component elementType
  Default is NA The component used for the root node. Either a string to use a HTML element or a component.

• sx ⁠Array func| object| bool | func| object⁠
  Default is NA The system prop that allows defining system overrides as well as additional CSS styles.See the sx page for more details.

Value

Object with shiny.tag class suitable for use in the UI of a Shiny app.

Description

https://mui.com/material-ui/api/breadcrumbs/

Usage

Breadcrumbs(...)

Arguments

Details

• children node
  Default is - The content of the component.

• classes object
  Default is - Override or extend the styles applied to the component.See CSS classes API below for more details.

• component elementType
  Default is - The component used for the root node. Either a string to use a HTML element or a component.

• expandText string
  Default is 'Show path' Override the default label for the expand button.For localization purposes, you can use the provided translations.

• itemsAfterCollapse integer
  Default is 1 If max items is exceeded, the number of items to show after the ellipsis.

• itemsBeforeCollapse integer
  Default is 1 If max items is exceeded, the number of items to show before the ellipsis.

• maxItems integer
  Default is 8 Specifies the maximum number of breadcrumbs to display. When there are more than the maximum number, only the first itemsBeforeCollapse and last itemsAfterCollapse will be shown, with an ellipsis in between.

• separator node
  Default is '/' Custom separator node.

• slotProps ⁠{ collapsedIcon?: func| object }⁠
  Default is The props used for each slot inside the Breadcumb.

• slots ⁠{ CollapsedIcon?: elementType }⁠
  Default is The components used for each slot inside the Breadcumb. Either a string to use a HTML element or a component.

• sx ⁠Array func| object| bool | func| object⁠
  Default is - The system prop that allows defining system overrides as well as additional CSS styles.See the sx page for more details.

Value

Object with shiny.tag class suitable for use in the UI of a Shiny app.

Description

https://mui.com/material-ui/api/button/

Usage

Button(...)

Button.shinyInput(inputId, ...)

updateButton.shinyInput(
  session = shiny::getDefaultReactiveDomain(),
  inputId,
  ...
)

Arguments

Details

• children node
  Default is - The content of the component.

• classes object
  Default is - Override or extend the styles applied to the component.See CSS classes API below for more details.

• color 'inherit'| 'primary'| 'secondary'| 'success'| 'error'| 'info'| 'warning'| string
  Default is 'primary' The color of the component. It supports both default and custom theme colors, which can be added as shown in the palette customization guide.

• component elementType
  Default is - The component used for the root node. Either a string to use a HTML element or a component.

• disabled bool
  Default is FALSE If true, the component is disabled.

• disableElevation bool
  Default is FALSE If true, no elevation is used.

• disableFocusRipple bool
  Default is FALSE If true, the keyboard focus ripple is disabled.

• disableRipple bool
  Default is FALSE If true, the ripple effect is disabled. Without a ripple there is no styling for :focus-visible by default. Be sure to highlight the element by applying separate styles with the .Mui-focusVisible class.

• endIcon node
  Default is - Element placed after the children.

• fullWidth bool
  Default is FALSE If true, the button will take up the full width of its container.

• href string
  Default is - The URL to link to when the button is clicked. If defined, an a element will be used as the root node.

• loading bool
  Default is null If true, the loading indicator is visible and the button is disabled. If true | false, the loading wrapper is always rendered before the children to prevent Google Translation Crash.

• loadingIndicator node
  Default is CircularProgress color="inherit" size=16 / Element placed before the children if the button is in loading state. The node should contain an element with role="progressbar" with an accessible name. By default, it renders a CircularProgress that is labeled by the button itself.

• loadingPosition 'center'| 'end'| 'start'
  Default is 'center' The loading indicator can be positioned on the start, end, or the center of the button.

• size 'small'| 'medium'| 'large'| string
  Default is 'medium' The size of the component. small is equivalent to the dense button styling.

• startIcon node
  Default is - Element placed before the children.

• sx ⁠Array func| object| bool | func| object⁠
  Default is - The system prop that allows defining system overrides as well as additional CSS styles.See the sx page for more details.

• variant 'contained'| 'outlined'| 'text'| string
  Default is 'text' The variant to use.

Value

Object with shiny.tag class suitable for use in the UI of a Shiny app.

Examples

library(shiny)
library(muiMaterial)

ui <- muiMaterialPage(
  Button.shinyInput("btn", "Click me", variant = "contained"),
  verbatimTextOutput("count")
)

server <- function(input, output, session) {
  output$count <- renderPrint(input$btn)
}

shinyApp(ui, server)

Description

https://mui.com/material-ui/api/button-base/

Usage

ButtonBase(...)

Arguments

Details

• action ref
  Default is - A ref for imperative actions. It currently only supports focusVisible() action.

• centerRipple bool
  Default is FALSE If true, the ripples are centered. They won't start at the cursor interaction position.

• children node
  Default is - The content of the component.

• classes object
  Default is - Override or extend the styles applied to the component.See CSS classes API below for more details.

• component ⁠element type⁠
  Default is - The component used for the root node. Either a string to use a HTML element or a component.This needs to be able to hold a ref.

• disabled bool
  Default is FALSE If true, the component is disabled.

• disableRipple bool
  Default is FALSE If true, the ripple effect is disabled. Without a ripple there is no styling for :focus-visible by default. Be sure to highlight the element by applying separate styles with the .Mui-focusVisible class.

• disableTouchRipple bool
  Default is FALSE If true, the touch ripple effect is disabled.

• focusRipple bool
  Default is FALSE If true, the base button will have a keyboard focus ripple.

• focusVisibleClassName string
  Default is - This prop can help identify which element has keyboard focus. The class name will be applied when the element gains the focus through keyboard interaction. It's a polyfill for the CSS :focus-visible selector. The rationale for using this feature is explained here. A polyfill can be used to apply a focus-visible class to other components if needed.

• LinkComponent elementType
  Default is 'a' The component used to render a link when the href prop is provided.

• onFocusVisible func
  Default is - Callback fired when the component is focused with a keyboard. We trigger a onFocus callback too.

• sx ⁠Array func| object| bool | func| object⁠
  Default is - The system prop that allows defining system overrides as well as additional CSS styles.See the sx page for more details.

• TouchRippleProps object
  Default is - Props applied to the TouchRipple element.

• touchRippleRef ⁠func| { current?: { pulsate: func, start: func, stop: func } }⁠
  Default is - A ref that points to the TouchRipple element.

Value

Object with shiny.tag class suitable for use in the UI of a Shiny app.

Description

https://mui.com/material-ui/api/button-group/

Usage

ButtonGroup(...)

Arguments

Details

• children node
  Default is - The content of the component.

• classes object
  Default is - Override or extend the styles applied to the component.See CSS classes API below for more details.

• color 'inherit'| 'primary'| 'secondary'| 'error'| 'info'| 'success'| 'warning'| string
  Default is 'primary' The color of the component. It supports both default and custom theme colors, which can be added as shown in the palette customization guide.

• component elementType
  Default is - The component used for the root node. Either a string to use a HTML element or a component.

• disabled bool
  Default is FALSE If true, the component is disabled.

• disableElevation bool
  Default is FALSE If true, no elevation is used.

• disableFocusRipple bool
  Default is FALSE If true, the button keyboard focus ripple is disabled.

• disableRipple bool
  Default is FALSE If true, the button ripple effect is disabled.

• fullWidth bool
  Default is FALSE If true, the buttons will take up the full width of its container.

• orientation 'horizontal'| 'vertical'
  Default is 'horizontal' The component orientation (layout flow direction).

• size 'small'| 'medium'| 'large'| string
  Default is 'medium' The size of the component. small is equivalent to the dense button styling.

• sx ⁠Array func| object| bool | func| object⁠
  Default is - The system prop that allows defining system overrides as well as additional CSS styles.See the sx page for more details.

• variant 'contained'| 'outlined'| 'text'| string
  Default is 'outlined' The variant to use.

Value

Object with shiny.tag class suitable for use in the UI of a Shiny app.

Description

https://mui.com/material-ui/api/card/

Usage

Card(...)

Arguments

Details

• children node
  Default is - The content of the component.

• classes object
  Default is - Override or extend the styles applied to the component.See CSS classes API below for more details.

• raised bool
  Default is FALSE If true, the card will use raised styling.

• sx ⁠Array func| object| bool | func| object⁠
  Default is - The system prop that allows defining system overrides as well as additional CSS styles.See the sx page for more details.

Value

Object with shiny.tag class suitable for use in the UI of a Shiny app.

Description

https://mui.com/material-ui/api/card-action-area/

Usage

CardActionArea(...)

Arguments

Details

• children node
  Default is NA The content of the component.

• classes object
  Default is NA Override or extend the styles applied to the component.See CSS classes API below for more details.

• sx ⁠Array func| object| bool | func| object⁠
  Default is NA The system prop that allows defining system overrides as well as additional CSS styles.See the sx page for more details.

Value

Object with shiny.tag class suitable for use in the UI of a Shiny app.

Description

https://mui.com/material-ui/api/card-actions/

Usage

CardActions(...)

Arguments

Details

• children node
  Default is - The content of the component.

• classes object
  Default is - Override or extend the styles applied to the component.See CSS classes API below for more details.

• disableSpacing bool
  Default is FALSE If true, the actions do not have additional margin.

• sx ⁠Array func| object| bool | func| object⁠
  Default is - The system prop that allows defining system overrides as well as additional CSS styles.See the sx page for more details.

Value

Object with shiny.tag class suitable for use in the UI of a Shiny app.

Description

https://mui.com/material-ui/api/card-content/

Usage

CardContent(...)

Arguments

Details

• children node
  Default is NA The content of the component.

• classes object
  Default is NA Override or extend the styles applied to the component.See CSS classes API below for more details.

• component elementType
  Default is NA The component used for the root node. Either a string to use a HTML element or a component.

• sx ⁠Array func| object| bool | func| object⁠
  Default is NA The system prop that allows defining system overrides as well as additional CSS styles.See the sx page for more details.

Value

Object with shiny.tag class suitable for use in the UI of a Shiny app.

Description

https://mui.com/material-ui/api/card-header/

Usage

CardHeader(...)

Arguments

Details

• action node
  Default is - The action to display in the card header.

• avatar node
  Default is - The Avatar element to display.

• classes object
  Default is - Override or extend the styles applied to the component.See CSS classes API below for more details.

• component elementType
  Default is - The component used for the root node. Either a string to use a HTML element or a component.

• disableTypography bool
  Default is FALSE If true, subheader and title won't be wrapped by a Typography component. This can be useful to render an alternative Typography variant by wrapping the title text, and optional subheader text with the Typography component.

• slotProps ⁠{ action?: func| object, avatar?: func| object, content?: func| object, root?: func| object, subheader?: func| object, title?: func| object }⁠
  Default is The props used for each slot inside.

• slots ⁠{ action?: elementType, avatar?: elementType, content?: elementType, root?: elementType, subheader?: elementType, title?: elementType }⁠
  Default is The components used for each slot inside.

• subheader node
  Default is - The content of the component.

• subheaderTypographyProps object
  Default is - These props will be forwarded to the subheader (as long as disableTypography is not true).Deprecated Use slotProps.subheader instead. This prop will be removed in a future major release. See Migrating from deprecated APIs for more details.

• sx ⁠Array func| object| bool | func| object⁠
  Default is - The system prop that allows defining system overrides as well as additional CSS styles.See the sx page for more details.

• title node
  Default is - The content of the component.

• titleTypographyProps object
  Default is - These props will be forwarded to the title (as long as disableTypography is not true).Deprecated Use slotProps.title instead. This prop will be removed in a future major release. See Migrating from deprecated APIs for more details.

Value

Object with shiny.tag class suitable for use in the UI of a Shiny app.

Description

https://mui.com/material-ui/api/card-media/

Usage

CardMedia(...)

Arguments

Details

• children node
  Default is NA The content of the component.

• classes object
  Default is NA Override or extend the styles applied to the component.See CSS classes API below for more details.

• component elementType
  Default is NA The component used for the root node. Either a string to use a HTML element or a component.

• image string
  Default is NA Image to be displayed as a background image. Either image or src prop must be specified. Note that caller must specify height otherwise the image will not be visible.

• src string
  Default is NA An alias for image property. Available only with media components. Media components: video, audio, picture, iframe, img.

• sx ⁠Array func| object| bool | func| object⁠
  Default is NA The system prop that allows defining system overrides as well as additional CSS styles.See the sx page for more details.

Value

Object with shiny.tag class suitable for use in the UI of a Shiny app.

Description

https://mui.com/material-ui/api/checkbox/

Usage

Checkbox(...)

Checkbox.shinyInput(inputId, ..., value = defaultValue)

updateCheckbox.shinyInput(
  session = shiny::getDefaultReactiveDomain(),
  inputId,
  ...
)

Arguments

Details

• checked bool
  Default is - If true, the component is checked.

• checkedIcon node
  Default is CheckBoxIcon / The icon to display when the component is checked.

• classes object
  Default is - Override or extend the styles applied to the component.See CSS classes API below for more details.

• color 'default'| 'primary'| 'secondary'| 'error'| 'info'| 'success'| 'warning'| string
  Default is 'primary' The color of the component. It supports both default and custom theme colors, which can be added as shown in the palette customization guide.

• defaultChecked bool
  Default is - The default checked state. Use when the component is not controlled.

• disabled bool
  Default is FALSE If true, the component is disabled.

• disableRipple bool
  Default is FALSE If true, the ripple effect is disabled.

• icon node
  Default is CheckBoxOutlineBlankIcon / The icon to display when the component is unchecked.

• id string
  Default is - The id of the input element.

• indeterminate bool
  Default is FALSE If true, the component appears indeterminate. This does not set the native input element to indeterminate due to inconsistent behavior across browsers. However, we set a data-indeterminate attribute on the input.

• indeterminateIcon node
  Default is IndeterminateCheckBoxIcon / The icon to display when the component is indeterminate.

• inputProps object
  Default is - Attributes applied to the input element.Deprecated Use slotProps.input instead. This prop will be removed in a future major release. See Migrating from deprecated APIs for more details.

• onChange func
  Default is - Callback fired when the state is changed.Signature:function(event: React.ChangeEvent) = voidevent The event source of the callback. You can pull out the new checked state by accessing event.target.checked (boolean).

• required bool
  Default is FALSE If true, the input element is required.

• size 'medium'| 'small'| string
  Default is 'medium' The size of the component. small is equivalent to the dense checkbox styling.

• slotProps ⁠{ input?: func| object, root?: func| object }⁠
  Default is The props used for each slot inside.

• slots ⁠{ input?: elementType, root?: elementType }⁠
  Default is The components used for each slot inside.

• sx ⁠Array func| object| bool | func| object⁠
  Default is - The system prop that allows defining system overrides as well as additional CSS styles.See the sx page for more details.

• value any
  Default is - The value of the component. The DOM API casts this to a string. The browser uses "on" as the default value.

Value

Object with shiny.tag class suitable for use in the UI of a Shiny app.

Description

https://mui.com/material-ui/api/chip/

Usage

Chip(...)

Arguments

Details

• avatar element
  Default is - The Avatar element to display.

• children unsupportedProp
  Default is - This prop isn't supported. Use the component prop if you need to change the children structure.

• classes object
  Default is - Override or extend the styles applied to the component.See CSS classes API below for more details.

• clickable bool
  Default is - If true, the chip will appear clickable, and will raise when pressed, even if the onClick prop is not defined. If false, the chip will not appear clickable, even if onClick prop is defined. This can be used, for example, along with the component prop to indicate an anchor Chip is clickable. Note: this controls the UI and does not affect the onClick event.

• color 'default'| 'primary'| 'secondary'| 'error'| 'info'| 'success'| 'warning'| string
  Default is 'default' The color of the component. It supports both default and custom theme colors, which can be added as shown in the palette customization guide.

• component elementType
  Default is - The component used for the root node. Either a string to use a HTML element or a component.

• deleteIcon element
  Default is - Override the default delete icon element. Shown only if onDelete is set.

• disabled bool
  Default is FALSE If true, the component is disabled.

• icon element
  Default is - Icon element.

• label node
  Default is - The content of the component.

• onDelete func
  Default is - Callback fired when the delete icon is clicked. If set, the delete icon will be shown.

• size 'medium'| 'small'| string
  Default is 'medium' The size of the component.

• skipFocusWhenDisabled bool
  Default is FALSE If true, allows the disabled chip to escape focus. If false, allows the disabled chip to receive focus.

• sx ⁠Array func| object| bool | func| object⁠
  Default is - The system prop that allows defining system overrides as well as additional CSS styles.See the sx page for more details.

• variant 'filled'| 'outlined'| string
  Default is 'filled' The variant to use.

Value

Object with shiny.tag class suitable for use in the UI of a Shiny app.

Description

https://mui.com/material-ui/api/circular-progress/

Usage

CircularProgress(...)

Arguments

Details

• classes object
  Default is - Override or extend the styles applied to the component.See CSS classes API below for more details.

• color 'inherit'| 'primary'| 'secondary'| 'error'| 'info'| 'success'| 'warning'| string
  Default is 'primary' The color of the component. It supports both default and custom theme colors, which can be added as shown in the palette customization guide.

• disableShrink bool
  Default is FALSE If true, the shrink animation is disabled. This only works if variant is indeterminate.

• size number| string
  Default is 40 The size of the component. If using a number, the pixel unit is assumed. If using a string, you need to provide the CSS unit, for example '3rem'.

• sx ⁠Array func| object| bool | func| object⁠
  Default is - The system prop that allows defining system overrides as well as additional CSS styles.See the sx page for more details.

• thickness number
  Default is 3.6 The thickness of the circle.

• value number
  Default is 0 The value of the progress indicator for the determinate variant. Value between 0 and 100.

• variant 'determinate'| 'indeterminate'
  Default is 'indeterminate' The variant to use. Use indeterminate when there is no progress value.

Value

Object with shiny.tag class suitable for use in the UI of a Shiny app.

Description

https://mui.com/material-ui/api/click-away-listener/

Usage

ClickAwayListener(...)

Arguments

Details

• children element
  Default is - The wrapped element.This needs to be able to hold a ref.

• onClickAway func
  Default is - Callback fired when a "click away" event is detected.

• disableReactTree bool
  Default is FALSE If true, the React tree is ignored and only the DOM tree is considered. This prop changes how portaled elements are handled.

• mouseEvent 'onClick'| 'onMouseDown'| 'onMouseUp'| 'onPointerDown'| 'onPointerUp'| false
  Default is 'onClick' The mouse event to listen to. You can disable the listener by providing false.

• touchEvent 'onTouchEnd'| 'onTouchStart'| false
  Default is 'onTouchEnd' The touch event to listen to. You can disable the listener by providing false.

Value

Object with shiny.tag class suitable for use in the UI of a Shiny app.

Description

https://mui.com/material-ui/api/collapse/

Usage

Collapse(...)

Arguments

Details

• addEndListener func
  Default is - Add a custom transition end trigger. Called with the transitioning DOM node and a done callback. Allows for more fine grained transition end logic. Note: Timeouts are still used as a fallback if provided.

• children node
  Default is - The content node to be collapsed.

• classes object
  Default is - Override or extend the styles applied to the component.See CSS classes API below for more details.

• collapsedSize number| string
  Default is '0px' The width (horizontal) or height (vertical) of the container when collapsed.

• component ⁠element type⁠
  Default is - The component used for the root node. Either a string to use a HTML element or a component.This needs to be able to hold a ref.

• easing ⁠{ enter?: string, exit?: string }| string⁠
  Default is - The transition timing function. You may specify a single easing or a object containing enter and exit values.

• in bool
  Default is - If true, the component will transition in.

• orientation 'horizontal'| 'vertical'
  Default is 'vertical' The transition orientation.

• sx ⁠Array func| object| bool | func| object⁠
  Default is - The system prop that allows defining system overrides as well as additional CSS styles.See the sx page for more details.

• timeout ⁠'auto'| number| { appear?: number, enter?: number, exit?: number }⁠
  Default is duration.standard The duration for the transition, in milliseconds. You may specify a single timeout for all transitions, or individually with an object.Set to 'auto' to automatically calculate transition time based on height.

Value

Object with shiny.tag class suitable for use in the UI of a Shiny app.

Description

https://mui.com/material-ui/api/container/

Usage

Container(...)

Arguments

Details

• classes object
  Default is - Override or extend the styles applied to the component.See CSS classes API below for more details.

• component elementType
  Default is - The component used for the root node. Either a string to use a HTML element or a component.

• disableGutters bool
  Default is FALSE If true, the left and right padding is removed.

• fixed bool
  Default is FALSE Set the max-width to match the min-width of the current breakpoint. This is useful if you'd prefer to design for a fixed set of sizes instead of trying to accommodate a fully fluid viewport. It's fluid by default.

• maxWidth 'xs'| 'sm'| 'md'| 'lg'| 'xl'| false| string
  Default is 'lg' Determine the max-width of the container. The container width grows with the size of the screen. Set to false to disable maxWidth.

• sx ⁠Array func| object| bool | func| object⁠
  Default is - The system prop that allows defining system overrides as well as additional CSS styles.See the sx page for more details.

Value

Object with shiny.tag class suitable for use in the UI of a Shiny app.

Description

https://mui.com/material-ui/api/css-baseline/

Usage

CssBaseline(...)

Arguments

Details

• children node
  Default is - You can wrap a node.

• enableColorScheme bool
  Default is FALSE Enable color-scheme CSS property to use theme.palette.mode. For more details, check out https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme For browser support, check out https://caniuse.com/?search=color-scheme

Value

Object with shiny.tag class suitable for use in the UI of a Shiny app.

Description

https://mui.com/material-ui/api/dialog/

Usage

Dialog(...)

Dialog.shinyInput(inputId, ...)

updateDialog.shinyInput(
  session = shiny::getDefaultReactiveDomain(),
  inputId,
  ...
)

Arguments

Details

• open bool
  Default is - If true, the component is shown.

• aria-describedby string
  Default is - The id(s) of the element(s) that describe the dialog.

• aria-labelledby string
  Default is - The id(s) of the element(s) that label the dialog.

• aria-modal 'false'| 'true'| bool
  Default is TRUE Informs assistive technologies that the element is modal. It's added on the element with role="dialog".

• BackdropComponent elementType
  Default is styled(Backdrop, name: 'MuiModal', slot: 'Backdrop', overridesResolver: (props, styles) = return styles.backdrop; , )( zIndex: -1, ) A backdrop component. This prop enables custom backdrop rendering.Deprecated Use slots.backdrop instead. While this prop currently works, it will be removed in the next major version.

• children node
  Default is - Dialog children, usually the included sub-components.

• classes object
  Default is - Override or extend the styles applied to the component.See CSS classes API below for more details.

• disableEscapeKeyDown bool
  Default is FALSE If true, hitting escape will not fire the onClose callback.

• fullScreen bool
  Default is FALSE If true, the dialog is full-screen.

• fullWidth bool
  Default is FALSE If true, the dialog stretches to maxWidth.Notice that the dialog width grow is limited by the default margin.

• maxWidth 'xs'| 'sm'| 'md'| 'lg'| 'xl'| false| string
  Default is 'sm' Determine the max-width of the dialog. The dialog width grows with the size of the screen. Set to false to disable maxWidth.

• onClose func
  Default is - Callback fired when the component requests to be closed.Signature:function(event: object, reason: string) = voidevent The event source of the callback.reason Can be: "escapeKeyDown", "backdropClick".

• PaperComponent elementType
  Default is Paper The component used to render the body of the dialog.

• PaperProps object
  Default is Props applied to the Paper element.Deprecated Use slotProps.paper instead. This prop will be removed in a future major release. See Migrating from deprecated APIs for more details.

• scroll 'body'| 'paper'
  Default is 'paper' Determine the container for scrolling the dialog.

• slotProps ⁠{ backdrop?: func| object, container?: func| object, paper?: func| object, root?: func| object, transition?: func| object }⁠
  Default is The props used for each slot inside.

• slots ⁠{ backdrop?: elementType, container?: elementType, paper?: elementType, root?: elementType, transition?: elementType }⁠
  Default is The components used for each slot inside.

• sx ⁠Array func| object| bool | func| object⁠
  Default is - The system prop that allows defining system overrides as well as additional CSS styles.See the sx page for more details.

• TransitionComponent elementType
  Default is Fade The component used for the transition. Follow this guide to learn more about the requirements for this component.Deprecated Use slots.transition instead. This prop will be removed in a future major release. See Migrating from deprecated APIs for more details.

• transitionDuration ⁠number| { appear?: number, enter?: number, exit?: number }⁠
  Default is enter: theme.transitions.duration.enteringScreen, exit: theme.transitions.duration.leavingScreen, The duration for the transition, in milliseconds. You may specify a single timeout for all transitions, or individually with an object.

• TransitionProps object
  Default is - Props applied to the transition element. By default, the element is based on this Transition component.Deprecated Use slotProps.transition instead. This prop will be removed in a future major release. See Migrating from deprecated APIs for more details.

Value

Object with shiny.tag class suitable for use in the UI of a Shiny app.

Note

This is an overlay surface wired as a click-reporter: input[[inputId]] holds a click count (incremented on every click inside the surface), and the wrapper does not manage the open state. Render it with open = TRUE/FALSE and toggle visibility from the server with updateDialog.shinyInput(session, inputId, open = TRUE). For the common "open on click of a button" pattern, Dialog.triggerId is simpler (open/close handled entirely client-side, no server logic).

Description

Custom Dialog bound to a DOM element by id. See 'js/src/MuiDialogTriggerId.jsx'. Open/close state is managed entirely client-side, so this works in Shiny apps, Quarto documents, and static HTML without server logic.

Usage

Dialog.triggerId(triggerId, ...)

Arguments

Value

Object with 'shiny.tag' class suitable for use in the UI of a Shiny app.

Examples

library(shiny)
library(muiMaterial)

ui <- muiMaterialPage(
  Button(id = "openDialog", "Open dialog"),
  Dialog.triggerId(
    "openDialog",
    DialogTitle("Hello"),
    DialogContent("Open/close managed entirely client-side.")
  )
)

shinyApp(ui, function(input, output, session) {})

Description

https://mui.com/material-ui/api/dialog-actions/

Usage

DialogActions(...)

Arguments

Details

• children node
  Default is - The content of the component.

• classes object
  Default is - Override or extend the styles applied to the component.See CSS classes API below for more details.

• disableSpacing bool
  Default is FALSE If true, the actions do not have additional margin.

• sx ⁠Array func| object| bool | func| object⁠
  Default is - The system prop that allows defining system overrides as well as additional CSS styles.See the sx page for more details.

Value

Object with shiny.tag class suitable for use in the UI of a Shiny app.

Description

https://mui.com/material-ui/api/dialog-content/

Usage

DialogContent(...)

Arguments

Details

• children node
  Default is - The content of the component.

• classes object
  Default is - Override or extend the styles applied to the component.See CSS classes API below for more details.

• dividers bool
  Default is FALSE Display the top and bottom dividers.

• sx ⁠Array func| object| bool | func| object⁠
  Default is - The system prop that allows defining system overrides as well as additional CSS styles.See the sx page for more details.

Value

Object with shiny.tag class suitable for use in the UI of a Shiny app.

Description

https://mui.com/material-ui/api/dialog-content-text/

Usage

DialogContentText(...)

Arguments

Details

• children node
  Default is NA The content of the component.

• classes object
  Default is NA Override or extend the styles applied to the component.See CSS classes API below for more details.

• sx ⁠Array func| object| bool | func| object⁠
  Default is NA The system prop that allows defining system overrides as well as additional CSS styles.See the sx page for more details.

Value

Object with shiny.tag class suitable for use in the UI of a Shiny app.

Description

https://mui.com/material-ui/api/dialog-title/

Usage

DialogTitle(...)

Arguments

Details

• children node
  Default is NA The content of the component.

• classes object
  Default is NA Override or extend the styles applied to the component.See CSS classes API below for more details.

• sx ⁠Array func| object| bool | func| object⁠
  Default is NA The system prop that allows defining system overrides as well as additional CSS styles.See the sx page for more details.

Value

Object with shiny.tag class suitable for use in the UI of a Shiny app.

Description

https://mui.com/material-ui/api/divider/

Usage

Divider(...)

Arguments

Details

• absolute bool
  Default is FALSE Absolutely position the element.

• children node
  Default is - The content of the component.

• classes object
  Default is - Override or extend the styles applied to the component.See CSS classes API below for more details.

• component elementType
  Default is - The component used for the root node. Either a string to use a HTML element or a component.

• flexItem bool
  Default is FALSE If true, a vertical divider will have the correct height when used in flex container. (By default, a vertical divider will have a calculated height of 0px if it is the child of a flex container.)

• light bool
  Default is FALSE If true, the divider will have a lighter color.Deprecated Use Divider sx= opacity: 0.6 / (or any opacity or color) instead. See Migrating from deprecated APIs for more details.

• orientation 'horizontal'| 'vertical'
  Default is 'horizontal' The component orientation.

• sx ⁠Array func| object| bool | func| object⁠
  Default is - The system prop that allows defining system overrides as well as additional CSS styles.See the sx page for more details.

• textAlign 'center'| 'left'| 'right'
  Default is 'center' The text alignment.

• variant 'fullWidth'| 'inset'| 'middle'| string
  Default is 'fullWidth' The variant to use.

Value

Object with shiny.tag class suitable for use in the UI of a Shiny app.

Description

https://mui.com/material-ui/api/drawer/

Usage

Drawer(...)

Drawer.shinyInput(inputId, ...)

updateDrawer.shinyInput(
  session = shiny::getDefaultReactiveDomain(),
  inputId,
  ...
)

Arguments

Details

• anchor 'bottom'| 'left'| 'right'| 'top'
  Default is 'left' Side from which the drawer will appear.

• children node
  Default is - The content of the component.

• classes object
  Default is - Override or extend the styles applied to the component.See CSS classes API below for more details.

• elevation integer
  Default is 16 The elevation of the drawer.

• hideBackdrop bool
  Default is FALSE If true, the backdrop is not rendered.

• ModalProps object
  Default is Props applied to the Modal element.

• onClose func
  Default is - Callback fired when the component requests to be closed. The reason parameter can optionally be used to control the response to onClose.Signature:function(event: object, reason: string) = voidevent The event source of the callback.reason Can be: "escapeKeyDown", "backdropClick".

• open bool
  Default is FALSE If true, the component is shown.

• PaperProps object
  Default is Props applied to the Paper element.Deprecated use the slotProps.paper prop instead. This prop will be removed in a future major release. See Migrating from deprecated APIs for more details.

• SlideProps object
  Default is - Props applied to the Slide element.Deprecated use the slotProps.transition prop instead. This prop will be removed in a future major release. See Migrating from deprecated APIs for more details.

• slotProps ⁠{ backdrop?: func| object, docked?: func| object, paper?: func| object, root?: func| object, transition?: func| object }⁠
  Default is The props used for each slot inside.

• slots ⁠{ backdrop?: elementType, docked?: elementType, paper?: elementType, root?: elementType, transition?: elementType }⁠
  Default is The components used for each slot inside.

• sx ⁠Array func| object| bool | func| object⁠
  Default is - The system prop that allows defining system overrides as well as additional CSS styles.See the sx page for more details.

• transitionDuration ⁠number| { appear?: number, enter?: number, exit?: number }⁠
  Default is enter: theme.transitions.duration.enteringScreen, exit: theme.transitions.duration.leavingScreen, The duration for the transition, in milliseconds. You may specify a single timeout for all transitions, or individually with an object.

• variant 'permanent'| 'persistent'| 'temporary'
  Default is 'temporary' The variant to use.

Value

Object with shiny.tag class suitable for use in the UI of a Shiny app.

Note

This is an overlay surface wired as a click-reporter: input[[inputId]] holds a click count, and the wrapper does not manage the open state. Render it with open = TRUE/FALSE and toggle visibility from the server with updateDrawer.shinyInput(session, inputId, open = TRUE). For the common "open on click of a button" pattern, Drawer.triggerId is simpler (open/close handled entirely client-side, no server logic).

Description

Custom Drawer bound to a DOM element by id. See 'js/src/MuiDrawerTriggerId.jsx'.

Usage

Drawer.triggerId(triggerId, ...)

Arguments

Value

Object with 'shiny.tag' class suitable for use in the UI of a Shiny app.

Examples

library(shiny)
library(muiMaterial)

ui <- muiMaterialPage(
  Button(id = "openDrawer", "Open drawer"),
  Drawer.triggerId("openDrawer", anchor = "left", "Drawer content here")
)

shinyApp(ui, function(input, output, session) {})

Description

https://mui.com/material-ui/api/fab/

Usage

Fab(...)

Fab.shinyInput(inputId, ...)

updateFab.shinyInput(session = shiny::getDefaultReactiveDomain(), inputId, ...)

Arguments

Details

• children node
  Default is - The content of the component.

• classes object
  Default is - Override or extend the styles applied to the component.See CSS classes API below for more details.

• color 'default'| 'error'| 'info'| 'inherit'| 'primary'| 'secondary'| 'success'| 'warning'| string
  Default is 'default' The color of the component. It supports both default and custom theme colors, which can be added as shown in the palette customization guide.

• component elementType
  Default is - The component used for the root node. Either a string to use a HTML element or a component.

• disabled bool
  Default is FALSE If true, the component is disabled.

• disableFocusRipple bool
  Default is FALSE If true, the keyboard focus ripple is disabled.

• disableRipple bool
  Default is - If true, the ripple effect is disabled.

• href string
  Default is - The URL to link to when the button is clicked. If defined, an a element will be used as the root node.

• size 'small'| 'medium'| 'large'| string
  Default is 'large' The size of the component. small is equivalent to the dense button styling.

• sx ⁠Array func| object| bool | func| object⁠
  Default is - The system prop that allows defining system overrides as well as additional CSS styles.See the sx page for more details.

• variant 'circular'| 'extended'| string
  Default is 'circular' The variant to use.

Value

Object with shiny.tag class suitable for use in the UI of a Shiny app.

Description

https://mui.com/material-ui/api/fade/

Usage

Fade(...)

Arguments

Details

• children element
  Default is - A single child content element.This needs to be able to hold a ref.

• addEndListener func
  Default is - Add a custom transition end trigger. Called with the transitioning DOM node and a done callback. Allows for more fine grained transition end logic. Note: Timeouts are still used as a fallback if provided.

• appear bool
  Default is TRUE Perform the enter transition when it first mounts if in is also true. Set this to false to disable this behavior.

• easing ⁠{ enter?: string, exit?: string }| string⁠
  Default is - The transition timing function. You may specify a single easing or a object containing enter and exit values.

• in bool
  Default is - If true, the component will transition in.

• timeout ⁠number| { appear?: number, enter?: number, exit?: number }⁠
  Default is enter: theme.transitions.duration.enteringScreen, exit: theme.transitions.duration.leavingScreen, The duration for the transition, in milliseconds. You may specify a single timeout for all transitions, or individually with an object.

Value

Object with shiny.tag class suitable for use in the UI of a Shiny app.

Description

https://mui.com/material-ui/api/filled-input/

Usage

FilledInput(...)

FilledInput.shinyInput(inputId, ..., value = defaultValue)

updateFilledInput.shinyInput(
  session = shiny::getDefaultReactiveDomain(),
  inputId,
  ...
)

Arguments

Details

• autoComplete string
  Default is - This prop helps users to fill forms faster, especially on mobile devices. The name can be confusing, as it's more like an autofill. You can learn more about it following the specification.

• autoFocus bool
  Default is - If true, the input element is focused during the first mount.

• classes object
  Default is - Override or extend the styles applied to the component.See CSS classes API below for more details.

• color 'primary'| 'secondary'| string
  Default is - The color of the component. It supports both default and custom theme colors, which can be added as shown in the palette customization guide. The prop defaults to the value ('primary') inherited from the parent FormControl component.

• components ⁠{ Input?: elementType, Root?: elementType }⁠
  Default is The components used for each slot inside.Deprecated use the slots prop instead. This prop will be removed in a future major release. See Migrating from deprecated APIs for more details.

• componentsProps ⁠{ input?: object, root?: object }⁠
  Default is The extra props for the slot components. You can override the existing props or add new ones.Deprecated use the slotProps prop instead. This prop will be removed in a future major release. See Migrating from deprecated APIs for more details.

• defaultValue any
  Default is - The default value. Use when the component is not controlled.

• disabled bool
  Default is - If true, the component is disabled. The prop defaults to the value (false) inherited from the parent FormControl component.

• disableUnderline bool
  Default is FALSE If true, the input will not have an underline.

• endAdornment node
  Default is - End InputAdornment for this component.

• error bool
  Default is - If true, the input will indicate an error. The prop defaults to the value (false) inherited from the parent FormControl component.

• fullWidth bool
  Default is FALSE If true, the input will take up the full width of its container.

• hiddenLabel bool
  Default is FALSE If true, the label is hidden. This is used to increase density for a FilledInput. Be sure to add aria-label to the input element.

• id string
  Default is - The id of the input element.

• inputComponent elementType
  Default is 'input' The component used for the input element. Either a string to use a HTML element or a component.

• inputProps object
  Default is Attributes applied to the input element.

• inputRef ref
  Default is - Pass a ref to the input element.

• margin 'dense'| 'none'
  Default is - If dense, will adjust vertical spacing. This is normally obtained via context from FormControl. The prop defaults to the value ('none') inherited from the parent FormControl component.

• maxRows number| string
  Default is - Maximum number of rows to display when multiline option is set to true.

• minRows number| string
  Default is - Minimum number of rows to display when multiline option is set to true.

• multiline bool
  Default is FALSE If true, a TextareaAutosize element is rendered.

• name string
  Default is - Name attribute of the input element.

• onChange func
  Default is - Callback fired when the value is changed.Signature:function(event: React.ChangeEvent) = voidevent The event source of the callback. You can pull out the new value by accessing event.target.value (string).

• placeholder string
  Default is - The short hint displayed in the input before the user enters a value.

• readOnly bool
  Default is - It prevents the user from changing the value of the field (not from interacting with the field).

• required bool
  Default is - If true, the input element is required. The prop defaults to the value (false) inherited from the parent FormControl component.

• rows number| string
  Default is - Number of rows to display when multiline option is set to true.

• slotProps ⁠{ input?: object, root?: object }⁠
  Default is The extra props for the slot components. You can override the existing props or add new ones.This prop is an alias for the componentsProps prop, which will be deprecated in the future.

• slots ⁠{ input?: elementType, root?: elementType }⁠
  Default is The components used for each slot inside.This prop is an alias for the components prop, which will be deprecated in the future.

• startAdornment node
  Default is - Start InputAdornment for this component.

• sx ⁠Array func| object| bool | func| object⁠
  Default is - The system prop that allows defining system overrides as well as additional CSS styles.See the sx page for more details.

• type string
  Default is 'text' Type of the input element. It should be a valid HTML5 input type.

• value any
  Default is - The value of the input element, required for a controlled component.

Value

Object with shiny.tag class suitable for use in the UI of a Shiny app.

Description

https://mui.com/material-ui/api/form-control/

Usage

FormControl(...)

Arguments

Details

• children node
  Default is - The content of the component.

• classes object
  Default is - Override or extend the styles applied to the component.See CSS classes API below for more details.

• color 'primary'| 'secondary'| 'error'| 'info'| 'success'| 'warning'| string
  Default is 'primary' The color of the component. It supports both default and custom theme colors, which can be added as shown in the palette customization guide.

• component elementType
  Default is - The component used for the root node. Either a string to use a HTML element or a component.

• disabled bool
  Default is FALSE If true, the label, input and helper text should be displayed in a disabled state.

• error bool
  Default is FALSE If true, the label is displayed in an error state.

• focused bool
  Default is - If true, the component is displayed in focused state.

• fullWidth bool
  Default is FALSE If true, the component will take up the full width of its container.

• hiddenLabel bool
  Default is FALSE If true, the label is hidden. This is used to increase density for a FilledInput. Be sure to add aria-label to the input element.

• margin 'dense'| 'none'| 'normal'
  Default is 'none' If dense or normal, will adjust vertical spacing of this and contained components.

• required bool
  Default is FALSE If true, the label will indicate that the input is required.

• size 'medium'| 'small'| string
  Default is 'medium' The size of the component.

• sx ⁠Array func| object| bool | func| object⁠
  Default is - The system prop that allows defining system overrides as well as additional CSS styles.See the sx page for more details.

• variant 'filled'| 'outlined'| 'standard'
  Default is 'outlined' The variant to use.

Value

Object with shiny.tag class suitable for use in the UI of a Shiny app.

Description

https://mui.com/material-ui/api/form-control-label/

Usage

FormControlLabel(...)

FormControlLabel.shinyInput(inputId, ..., value = defaultValue)

updateFormControlLabel.shinyInput(
  session = shiny::getDefaultReactiveDomain(),
  inputId,
  ...
)

Arguments

Details

• control element
  Default is - A control element. For instance, it can be a Radio, a Switch or a Checkbox.

• checked bool
  Default is - If true, the component appears selected.

• classes object
  Default is - Override or extend the styles applied to the component.See CSS classes API below for more details.

• componentsProps ⁠{ typography?: object }⁠
  Default is The props used for each slot inside.Deprecated use the slotProps prop instead. This prop will be removed in a future major release. See Migrating from deprecated APIs for more details.

• disabled bool
  Default is - If true, the control is disabled.

• disableTypography bool
  Default is - If true, the label is rendered as it is passed without an additional typography node.

• inputRef ref
  Default is - Pass a ref to the input element.

• label node
  Default is - A text or an element to be used in an enclosing label element.

• labelPlacement 'bottom'| 'end'| 'start'| 'top'
  Default is 'end' The position of the label.

• onChange func
  Default is - Callback fired when the state is changed.Signature:function(event: React.SyntheticEvent) = voidevent The event source of the callback. You can pull out the new checked state by accessing event.target.checked (boolean).

• required bool
  Default is - If true, the label will indicate that the input is required.

• slotProps ⁠{ typography?: func| object }⁠
  Default is The props used for each slot inside.

• slots ⁠{ typography?: elementType }⁠
  Default is The components used for each slot inside.

• sx ⁠Array func| object| bool | func| object⁠
  Default is - The system prop that allows defining system overrides as well as additional CSS styles.See the sx page for more details.

• value any
  Default is - The value of the component.

Value

Object with shiny.tag class suitable for use in the UI of a Shiny app.

Description

https://mui.com/material-ui/api/form-group/

Usage

FormGroup(...)

Arguments

Details

• children node
  Default is - The content of the component.

• classes object
  Default is - Override or extend the styles applied to the component.See CSS classes API below for more details.

• row bool
  Default is FALSE Display group of elements in a compact row.

• sx ⁠Array func| object| bool | func| object⁠
  Default is - The system prop that allows defining system overrides as well as additional CSS styles.See the sx page for more details.

Value

Object with shiny.tag class suitable for use in the UI of a Shiny app.

Description

https://mui.com/material-ui/api/form-helper-text/

Usage

FormHelperText(...)

Arguments

Details

• children node
  Default is NA The content of the component.If ' ' is provided, the component reserves one line height for displaying a future message.

• classes object
  Default is NA Override or extend the styles applied to the component.See CSS classes API below for more details.

• component elementType
  Default is NA The component used for the root node. Either a string to use a HTML element or a component.

• disabled bool
  Default is NA If true, the helper text should be displayed in a disabled state.

• error bool
  Default is NA If true, helper text should be displayed in an error state.

• filled bool
  Default is NA If true, the helper text should use filled classes key.

• focused bool
  Default is NA If true, the helper text should use focused classes key.

• margin 'dense'
  Default is NA If dense, will adjust vertical spacing. This is normally obtained via context from FormControl.

• required bool
  Default is NA If true, the helper text should use required classes key.

• sx ⁠Array func| object| bool | func| object⁠
  Default is NA The system prop that allows defining system overrides as well as additional CSS styles.See the sx page for more details.

• variant 'filled'| 'outlined'| 'standard'| string
  Default is NA The variant to use.

Value

Object with shiny.tag class suitable for use in the UI of a Shiny app.

Description

https://mui.com/material-ui/api/form-label/

Usage

FormLabel(...)

Arguments

Details

• children node
  Default is NA The content of the component.

• classes object
  Default is NA Override or extend the styles applied to the component.See CSS classes API below for more details.

• color 'error'| 'info'| 'primary'| 'secondary'| 'success'| 'warning'| string
  Default is NA The color of the component. It supports both default and custom theme colors, which can be added as shown in the palette customization guide.

• component elementType
  Default is NA The component used for the root node. Either a string to use a HTML element or a component.

• disabled bool
  Default is NA If true, the label should be displayed in a disabled state.

• error bool
  Default is NA If true, the label is displayed in an error state.

• filled bool
  Default is NA If true, the label should use filled classes key.

• focused bool
  Default is NA If true, the input of this label is focused (used by FormGroup components).

• required bool
  Default is NA If true, the label will indicate that the input is required.

• sx ⁠Array func| object| bool | func| object⁠
  Default is NA The system prop that allows defining system overrides as well as additional CSS styles.See the sx page for more details.

Value

Object with shiny.tag class suitable for use in the UI of a Shiny app.

Description

https://mui.com/material-ui/api/global-styles/

Usage

GlobalStyles(...)

Arguments

Details

• styles array| func| number| object| string| bool
  Default is NA The styles you want to apply globally.

Value

Object with shiny.tag class suitable for use in the UI of a Shiny app.

Description

https://mui.com/material-ui/api/grid/

Usage

Grid(...)

Arguments

Details

• children node
  Default is - The content of the component.

• columns ⁠Array number | number| object⁠
  Default is 12 The number of columns.

• columnSpacing ⁠Array number| string | number| object| string⁠
  Default is - Defines the horizontal space between the type item components. It overrides the value of the spacing prop.

• container bool
  Default is FALSE If true, the component will have the flex container behavior. You should be wrapping items with a container.

• direction ⁠'column-reverse'| 'column'| 'row-reverse'| 'row'| Array 'column-reverse'| 'column'| 'row-reverse'| 'row' | object⁠
  Default is 'row' Defines the flex-direction style property. It is applied for all screen sizes.

• offset ⁠string| number| Array string| number | object⁠
  Default is - Defines the offset value for the type item components.

• rowSpacing ⁠Array number| string | number| object| string⁠
  Default is - Defines the vertical space between the type item components. It overrides the value of the spacing prop.

• size ⁠string| bool| number| Array string| bool| number | object⁠
  Default is - Defines the size of the the type item components.

• spacing ⁠Array number| string | number| object| string⁠
  Default is 0 Defines the space between the type item components. It can only be used on a type container component.

• wrap 'nowrap'| 'wrap-reverse'| 'wrap'
  Default is 'wrap' Defines the flex-wrap style property. It's applied for all screen sizes.

Value

Object with shiny.tag class suitable for use in the UI of a Shiny app.

Description

https://mui.com/material-ui/api/grow/

Usage

Grow(...)

Arguments

Details

• children element
  Default is - A single child content element.This needs to be able to hold a ref.

• addEndListener func
  Default is - Add a custom transition end trigger. Called with the transitioning DOM node and a done callback. Allows for more fine grained transition end logic. Note: Timeouts are still used as a fallback if provided.

• appear bool
  Default is TRUE Perform the enter transition when it first mounts if in is also true. Set this to false to disable this behavior.

• easing ⁠{ enter?: string, exit?: string }| string⁠
  Default is - The transition timing function. You may specify a single easing or a object containing enter and exit values.

• in bool
  Default is - If true, the component will transition in.

• timeout ⁠'auto'| number| { appear?: number, enter?: number, exit?: number }⁠
  Default is 'auto' The duration for the transition, in milliseconds. You may specify a single timeout for all transitions, or individually with an object.Set to 'auto' to automatically calculate transition time based on height.

Value

Object with shiny.tag class suitable for use in the UI of a Shiny app.

Description

https://mui.com/material-ui/api/icon/

Usage

Icon(...)

Arguments

Details

• baseClassName string
  Default is 'material-icons' The base class applied to the icon. Defaults to 'material-icons', but can be changed to any other base class that suits the icon font you're using (for example material-icons-rounded, fas, etc).

• children node
  Default is - The name of the icon font ligature.

• classes object
  Default is - Override or extend the styles applied to the component.See CSS classes API below for more details.

• color 'inherit'| 'action'| 'disabled'| 'primary'| 'secondary'| 'error'| 'info'| 'success'| 'warning'| string
  Default is 'inherit' The color of the component. It supports both default and custom theme colors, which can be added as shown in the palette customization guide.

• component elementType
  Default is - The component used for the root node. Either a string to use a HTML element or a component.

• fontSize 'inherit'| 'large'| 'medium'| 'small'| string
  Default is 'medium' The fontSize applied to the icon. Defaults to 24px, but can be configure to inherit font size.

• sx ⁠Array func| object| bool | func| object⁠
  Default is - The system prop that allows defining system overrides as well as additional CSS styles.See the sx page for more details.

Value

Object with shiny.tag class suitable for use in the UI of a Shiny app.

Description

https://mui.com/material-ui/api/icon-button/

Usage

IconButton(...)

IconButton.shinyInput(inputId, ...)

updateIconButton.shinyInput(
  session = shiny::getDefaultReactiveDomain(),
  inputId,
  ...
)

Arguments

Details

• children node
  Default is - The icon to display.

• classes object
  Default is - Override or extend the styles applied to the component.See CSS classes API below for more details.

• color 'inherit'| 'default'| 'primary'| 'secondary'| 'error'| 'info'| 'success'| 'warning'| string
  Default is 'default' The color of the component. It supports both default and custom theme colors, which can be added as shown in the palette customization guide.

• disabled bool
  Default is FALSE If true, the component is disabled.

• disableFocusRipple bool
  Default is FALSE If true, the keyboard focus ripple is disabled.

• disableRipple bool
  Default is FALSE If true, the ripple effect is disabled. Without a ripple there is no styling for :focus-visible by default. Be sure to highlight the element by applying separate styles with the .Mui-focusVisible class.

• edge 'end'| 'start'| false
  Default is FALSE If given, uses a negative margin to counteract the padding on one side (this is often helpful for aligning the left or right side of the icon with content above or below, without ruining the border size and shape).

• loading bool
  Default is null If true, the loading indicator is visible and the button is disabled. If true | false, the loading wrapper is always rendered before the children to prevent Google Translation Crash.

• loadingIndicator node
  Default is CircularProgress color="inherit" size=16 / Element placed before the children if the button is in loading state. The node should contain an element with role="progressbar" with an accessible name. By default, it renders a CircularProgress that is labeled by the button itself.

• size 'small'| 'medium'| 'large'| string
  Default is 'medium' The size of the component. small is equivalent to the dense button styling.

• sx ⁠Array func| object| bool | func| object⁠
  Default is - The system prop that allows defining system overrides as well as additional CSS styles.See the sx page for more details.

Value

Object with shiny.tag class suitable for use in the UI of a Shiny app.

Description

https://mui.com/material-ui/api/image-list/

Usage

ImageList(...)

Arguments

Details

• children node
  Default is - The content of the component, normally ImageListItems.

• classes object
  Default is - Override or extend the styles applied to the component.See CSS classes API below for more details.

• cols integer
  Default is 2 Number of columns.

• component elementType
  Default is - The component used for the root node. Either a string to use a HTML element or a component.

• gap number
  Default is 4 The gap between items in px.

• rowHeight 'auto'| number
  Default is 'auto' The height of one row in px.

• sx ⁠Array func| object| bool | func| object⁠
  Default is - The system prop that allows defining system overrides as well as additional CSS styles.See the sx page for more details.

• variant 'masonry'| 'quilted'| 'standard'| 'woven'| string
  Default is 'standard' The variant to use.

Value

Object with shiny.tag class suitable for use in the UI of a Shiny app.

Description

https://mui.com/material-ui/api/image-list-item/

Usage

ImageListItem(...)

Arguments

Details

• children node
  Default is - The content of the component, normally an img .

• classes object
  Default is - Override or extend the styles applied to the component.See CSS classes API below for more details.

• cols integer
  Default is 1 Width of the item in number of grid columns.

• component elementType
  Default is - The component used for the root node. Either a string to use a HTML element or a component.

• rows integer
  Default is 1 Height of the item in number of grid rows.

• sx ⁠Array func| object| bool | func| object⁠
  Default is - The system prop that allows defining system overrides as well as additional CSS styles.See the sx page for more details.

Value

Object with shiny.tag class suitable for use in the UI of a Shiny app.

Description

https://mui.com/material-ui/api/image-list-item-bar/

Usage

ImageListItemBar(...)

Arguments

Details

• actionIcon node
  Default is - An IconButton element to be used as secondary action target (primary action target is the item itself).

• actionPosition 'left'| 'right'
  Default is 'right' Position of secondary action IconButton.

• classes object
  Default is - Override or extend the styles applied to the component.See CSS classes API below for more details.

• position 'below'| 'bottom'| 'top'
  Default is 'bottom' Position of the title bar.

• subtitle node
  Default is - String or element serving as subtitle (support text).

• sx ⁠Array func| object| bool | func| object⁠
  Default is - The system prop that allows defining system overrides as well as additional CSS styles.See the sx page for more details.

• title node
  Default is - Title to be displayed.

Value

Object with shiny.tag class suitable for use in the UI of a Shiny app.

Description

https://mui.com/material-ui/api/input/

Usage

Input(...)

Input.shinyInput(inputId, ..., value = defaultValue)

updateInput.shinyInput(
  session = shiny::getDefaultReactiveDomain(),
  inputId,
  ...
)

Arguments

Details

• autoComplete string
  Default is - This prop helps users to fill forms faster, especially on mobile devices. The name can be confusing, as it's more like an autofill. You can learn more about it following the specification.

• autoFocus bool
  Default is - If true, the input element is focused during the first mount.

• classes object
  Default is - Override or extend the styles applied to the component.See CSS classes API below for more details.

• color 'primary'| 'secondary'| string
  Default is - The color of the component. It supports both default and custom theme colors, which can be added as shown in the palette customization guide. The prop defaults to the value ('primary') inherited from the parent FormControl component.

• components ⁠{ Input?: elementType, Root?: elementType }⁠
  Default is The components used for each slot inside.Deprecated use the slots prop instead. This prop will be removed in a future major release. See Migrating from deprecated APIs for more details.

• componentsProps ⁠{ input?: object, root?: object }⁠
  Default is The extra props for the slot components. You can override the existing props or add new ones.Deprecated use the slotProps prop instead. This prop will be removed in a future major release. See Migrating from deprecated APIs for more details.

• defaultValue any
  Default is - The default value. Use when the component is not controlled.

• disabled bool
  Default is - If true, the component is disabled. The prop defaults to the value (false) inherited from the parent FormControl component.

• disableUnderline bool
  Default is FALSE If true, the input will not have an underline.

• endAdornment node
  Default is - End InputAdornment for this component.

• error bool
  Default is - If true, the input will indicate an error. The prop defaults to the value (false) inherited from the parent FormControl component.

• fullWidth bool
  Default is FALSE If true, the input will take up the full width of its container.

• id string
  Default is - The id of the input element.

• inputComponent elementType
  Default is 'input' The component used for the input element. Either a string to use a HTML element or a component.

• inputProps object
  Default is Attributes applied to the input element.

• inputRef ref
  Default is - Pass a ref to the input element.

• margin 'dense'| 'none'
  Default is - If dense, will adjust vertical spacing. This is normally obtained via context from FormControl. The prop defaults to the value ('none') inherited from the parent FormControl component.

• maxRows number| string
  Default is - Maximum number of rows to display when multiline option is set to true.

• minRows number| string
  Default is - Minimum number of rows to display when multiline option is set to true.

• multiline bool
  Default is FALSE If true, a TextareaAutosize element is rendered.

• name string
  Default is - Name attribute of the input element.

• onChange func
  Default is - Callback fired when the value is changed.Signature:function(event: React.ChangeEvent) = voidevent The event source of the callback. You can pull out the new value by accessing event.target.value (string).

• placeholder string
  Default is - The short hint displayed in the input before the user enters a value.

• readOnly bool
  Default is - It prevents the user from changing the value of the field (not from interacting with the field).

• required bool
  Default is - If true, the input element is required. The prop defaults to the value (false) inherited from the parent FormControl component.

• rows number| string
  Default is - Number of rows to display when multiline option is set to true.

• slotProps ⁠{ input?: object, root?: object }⁠
  Default is The extra props for the slot components. You can override the existing props or add new ones.This prop is an alias for the componentsProps prop, which will be deprecated in the future.

• slots ⁠{ input?: elementType, root?: elementType }⁠
  Default is The components used for each slot inside.This prop is an alias for the components prop, which will be deprecated in the future.

• startAdornment node
  Default is - Start InputAdornment for this component.

• sx ⁠Array func| object| bool | func| object⁠
  Default is - The system prop that allows defining system overrides as well as additional CSS styles.See the sx page for more details.

• type string
  Default is 'text' Type of the input element. It should be a valid HTML5 input type.

• value any
  Default is - The value of the input element, required for a controlled component.

Value

Object with shiny.tag class suitable for use in the UI of a Shiny app.

Description

https://mui.com/material-ui/api/input-adornment/

Usage

InputAdornment(...)

Arguments

Details

• position 'end'| 'start'
  Default is - The position this adornment should appear relative to the Input.

• children node
  Default is - The content of the component, normally an IconButton or string.

• classes object
  Default is - Override or extend the styles applied to the component.See CSS classes API below for more details.

• component elementType
  Default is - The component used for the root node. Either a string to use a HTML element or a component.

• disablePointerEvents bool
  Default is FALSE Disable pointer events on the root. This allows for the content of the adornment to focus the input on click.

• disableTypography bool
  Default is FALSE If children is a string then disable wrapping in a Typography component.

• sx ⁠Array func| object| bool | func| object⁠
  Default is - The system prop that allows defining system overrides as well as additional CSS styles.See the sx page for more details.

• variant 'filled'| 'outlined'| 'standard'
  Default is - The variant to use. Note: If you are using the TextField component or the FormControl component you do not have to set this manually.

Value

Object with shiny.tag class suitable for use in the UI of a Shiny app.

Description

https://mui.com/material-ui/api/input-base/

Usage

InputBase(...)

Arguments

Details

• autoComplete string
  Default is - This prop helps users to fill forms faster, especially on mobile devices. The name can be confusing, as it's more like an autofill. You can learn more about it following the specification.

• autoFocus bool
  Default is - If true, the input element is focused during the first mount.

• classes object
  Default is - Override or extend the styles applied to the component.See CSS classes API below for more details.

• color 'primary'| 'secondary'| 'error'| 'info'| 'success'| 'warning'| string
  Default is - The color of the component. It supports both default and custom theme colors, which can be added as shown in the palette customization guide. The prop defaults to the value ('primary') inherited from the parent FormControl component.

• components ⁠{ Input?: elementType, Root?: elementType }⁠
  Default is The components used for each slot inside.Deprecated use the slots prop instead. This prop will be removed in a future major release. See Migrating from deprecated APIs for more details.

• componentsProps ⁠{ input?: object, root?: object }⁠
  Default is The extra props for the slot components. You can override the existing props or add new ones.Deprecated use the slotProps prop instead. This prop will be removed in a future major release. See Migrating from deprecated APIs for more details.

• defaultValue any
  Default is - The default value. Use when the component is not controlled.

• disabled bool
  Default is - If true, the component is disabled. The prop defaults to the value (false) inherited from the parent FormControl component.

• disableInjectingGlobalStyles bool
  Default is FALSE If true, GlobalStyles for the auto-fill keyframes will not be injected/removed on mount/unmount. Make sure to inject them at the top of your application. This option is intended to help with boosting the initial rendering performance if you are loading a big amount of Input components at once.

• endAdornment node
  Default is - End InputAdornment for this component.

• error bool
  Default is - If true, the input will indicate an error. The prop defaults to the value (false) inherited from the parent FormControl component.

• fullWidth bool
  Default is FALSE If true, the input will take up the full width of its container.

• id string
  Default is - The id of the input element.

• inputComponent ⁠element type⁠
  Default is 'input' The component used for the input element. Either a string to use a HTML element or a component.This needs to be able to hold a ref.

• inputProps object
  Default is Attributes applied to the input element.

• inputRef ref
  Default is - Pass a ref to the input element.

• margin 'dense'| 'none'
  Default is - If dense, will adjust vertical spacing. This is normally obtained via context from FormControl. The prop defaults to the value ('none') inherited from the parent FormControl component.

• maxRows number| string
  Default is - Maximum number of rows to display when multiline option is set to true.

• minRows number| string
  Default is - Minimum number of rows to display when multiline option is set to true.

• multiline bool
  Default is FALSE If true, a TextareaAutosize element is rendered.

• name string
  Default is - Name attribute of the input element.

• onBlur func
  Default is - Callback fired when the input is blurred.Notice that the first argument (event) might be undefined.

• onChange func
  Default is - Callback fired when the value is changed.Signature:function(event: React.ChangeEvent) = voidevent The event source of the callback. You can pull out the new value by accessing event.target.value (string).

• onInvalid func
  Default is - Callback fired when the input doesn't satisfy its constraints.

• placeholder string
  Default is - The short hint displayed in the input before the user enters a value.

• readOnly bool
  Default is - It prevents the user from changing the value of the field (not from interacting with the field).

• required bool
  Default is - If true, the input element is required. The prop defaults to the value (false) inherited from the parent FormControl component.

• rows number| string
  Default is - Number of rows to display when multiline option is set to true.

• size 'medium'| 'small'| string
  Default is - The size of the component.

• slotProps ⁠{ input?: object, root?: object }⁠
  Default is The extra props for the slot components. You can override the existing props or add new ones.This prop is an alias for the componentsProps prop, which will be deprecated in the future.

• slots ⁠{ input?: elementType, root?: elementType }⁠
  Default is The components used for each slot inside.This prop is an alias for the components prop, which will be deprecated in the future.

• startAdornment node
  Default is - Start InputAdornment for this component.

• sx ⁠Array func| object| bool | func| object⁠
  Default is - The system prop that allows defining system overrides as well as additional CSS styles.See the sx page for more details.

• type string
  Default is 'text' Type of the input element. It should be a valid HTML5 input type.

• value any
  Default is - The value of the input element, required for a controlled component.

Value

Object with shiny.tag class suitable for use in the UI of a Shiny app.

Description

https://mui.com/material-ui/api/input-label/

Usage

InputLabel(...)

Arguments

Details

• children node
  Default is - The content of the component.

• classes object
  Default is - Override or extend the styles applied to the component.See CSS classes API below for more details.

• color 'error'| 'info'| 'primary'| 'secondary'| 'success'| 'warning'| string
  Default is - The color of the component. It supports both default and custom theme colors, which can be added as shown in the palette customization guide.

• disableAnimation bool
  Default is FALSE If true, the transition animation is disabled.

• disabled bool
  Default is - If true, the component is disabled.

• error bool
  Default is - If true, the label is displayed in an error state.

• focused bool
  Default is - If true, the input of this label is focused.

• margin 'dense'
  Default is - If dense, will adjust vertical spacing. This is normally obtained via context from FormControl.

• required bool
  Default is - if true, the label will indicate that the input is required.

• shrink bool
  Default is - If true, the label is shrunk.

• size 'medium'| 'small'| string
  Default is 'medium' The size of the component.

• sx ⁠Array func| object| bool | func| object⁠
  Default is - The system prop that allows defining system overrides as well as additional CSS styles.See the sx page for more details.

• variant 'filled'| 'outlined'| 'standard'
  Default is - The variant to use.

Value

Object with shiny.tag class suitable for use in the UI of a Shiny app.

Description

https://mui.com/material-ui/api/linear-progress/

Usage

LinearProgress(...)

Arguments

Details

• classes object
  Default is - Override or extend the styles applied to the component.See CSS classes API below for more details.

• color 'inherit'| 'primary'| 'secondary'| string
  Default is 'primary' The color of the component. It supports both default and custom theme colors, which can be added as shown in the palette customization guide.

• sx ⁠Array func| object| bool | func| object⁠
  Default is - The system prop that allows defining system overrides as well as additional CSS styles.See the sx page for more details.

• value number
  Default is - The value of the progress indicator for the determinate and buffer variants. Value between 0 and 100.

• valueBuffer number
  Default is - The value for the buffer variant. Value between 0 and 100.

• variant 'buffer'| 'determinate'| 'indeterminate'| 'query'
  Default is 'indeterminate' The variant to use. Use indeterminate or query when there is no progress value.

Value

Object with shiny.tag class suitable for use in the UI of a Shiny app.

Description

https://mui.com/material-ui/api/link/

Usage

Link(...)

Arguments

Details

• children node
  Default is - The content of the component.

• classes object
  Default is - Override or extend the styles applied to the component.See CSS classes API below for more details.

• color 'primary'| 'secondary'| 'success'| 'error'| 'info'| 'warning'| 'textPrimary'| 'textSecondary'| 'textDisabled'| string
  Default is 'primary' The color of the link.

• component ⁠element type⁠
  Default is - The component used for the root node. Either a string to use a HTML element or a component.This needs to be able to hold a ref.

• sx ⁠Array func| object| bool | func| object⁠
  Default is - The system prop that allows defining system overrides as well as additional CSS styles.See the sx page for more details.

• TypographyClasses object
  Default is - classes prop applied to the Typography element.

• underline 'always'| 'hover'| 'none'
  Default is 'always' Controls when the link should have an underline.

• variant 'body1'| 'body2'| 'button'| 'caption'| 'h1'| 'h2'| 'h3'| 'h4'| 'h5'| 'h6'| 'inherit'| 'overline'| 'subtitle1'| 'subtitle2'| string
  Default is 'inherit' Applies the theme typography styles.

Value

Object with shiny.tag class suitable for use in the UI of a Shiny app.

Description

https://mui.com/material-ui/api/list/

Usage

List(...)

Arguments

Details

• children node
  Default is - The content of the component.

• classes object
  Default is - Override or extend the styles applied to the component.See CSS classes API below for more details.

• component elementType
  Default is - The component used for the root node. Either a string to use a HTML element or a component.

• dense bool
  Default is FALSE If true, compact vertical padding designed for keyboard and mouse input is used for the list and list items. The prop is available to descendant components as the dense context.

• disablePadding bool
  Default is FALSE If true, vertical padding is removed from the list.

• subheader node
  Default is - The content of the subheader, normally ListSubheader.

• sx ⁠Array func| object| bool | func| object⁠
  Default is - The system prop that allows defining system overrides as well as additional CSS styles.See the sx page for more details.

Value

Object with shiny.tag class suitable for use in the UI of a Shiny app.

Description

https://mui.com/material-ui/api/list-item/

Usage

ListItem(...)

Arguments

Details

• alignItems 'center'| 'flex-start'
  Default is 'center' Defines the align-items style property.

• children node
  Default is - The content of the component if a ListItemSecondaryAction is used it must be the last child.

• classes object
  Default is - Override or extend the styles applied to the component.See CSS classes API below for more details.

• component elementType
  Default is - The component used for the root node. Either a string to use a HTML element or a component.

• components ⁠{ Root?: elementType }⁠
  Default is The components used for each slot inside.Deprecated Use the slots prop instead. This prop will be removed in a future major release. See Migrating from deprecated APIs for more details.

• componentsProps ⁠{ root?: object }⁠
  Default is The extra props for the slot components. You can override the existing props or add new ones.Deprecated Use the slotProps prop instead. This prop will be removed in a future major release. See Migrating from deprecated APIs for more details.

• ContainerComponent ⁠element type⁠
  Default is 'li' The container component used when a ListItemSecondaryAction is the last child.This needs to be able to hold a ref.Deprecated Use the component or slots.root prop instead. This prop will be removed in a future major release. See Migrating from deprecated APIs for more details.

• ContainerProps object
  Default is Props applied to the container component if used.Deprecated Use the slotProps.root prop instead. This prop will be removed in a future major release. See Migrating from deprecated APIs for more details.

• dense bool
  Default is FALSE If true, compact vertical padding designed for keyboard and mouse input is used. The prop defaults to the value inherited from the parent List component.

• disableGutters bool
  Default is FALSE If true, the left and right padding is removed.

• disablePadding bool
  Default is FALSE If true, all padding is removed.

• divider bool
  Default is FALSE If true, a 1px light border is added to the bottom of the list item.

• secondaryAction node
  Default is - The element to display at the end of ListItem.

• slotProps ⁠{ root?: object }⁠
  Default is The extra props for the slot components. You can override the existing props or add new ones.

• slots ⁠{ root?: elementType }⁠
  Default is The components used for each slot inside.

• sx ⁠Array func| object| bool | func| object⁠
  Default is - The system prop that allows defining system overrides as well as additional CSS styles.See the sx page for more details.

Value

Object with shiny.tag class suitable for use in the UI of a Shiny app.

Description

https://mui.com/material-ui/api/list-item-avatar/

Usage

ListItemAvatar(...)

Arguments

Details

• children node
  Default is NA The content of the component, normally an Avatar.

• classes object
  Default is NA Override or extend the styles applied to the component.See CSS classes API below for more details.

• sx ⁠Array func| object| bool | func| object⁠
  Default is NA The system prop that allows defining system overrides as well as additional CSS styles.See the sx page for more details.

Value

Object with shiny.tag class suitable for use in the UI of a Shiny app.

Description

https://mui.com/material-ui/api/list-item-button/

Usage

ListItemButton(...)

Arguments

Details

• alignItems 'center'| 'flex-start'
  Default is 'center' Defines the align-items style property.

• autoFocus bool
  Default is FALSE If true, the list item is focused during the first mount. Focus will also be triggered if the value changes from false to true.

• children node
  Default is - The content of the component if a ListItemSecondaryAction is used it must be the last child.

• classes object
  Default is - Override or extend the styles applied to the component.See CSS classes API below for more details.

• component elementType
  Default is - The component used for the root node. Either a string to use a HTML element or a component.

• dense bool
  Default is FALSE If true, compact vertical padding designed for keyboard and mouse input is used. The prop defaults to the value inherited from the parent List component.

• disabled bool
  Default is FALSE If true, the component is disabled.

• disableGutters bool
  Default is FALSE If true, the left and right padding is removed.

• divider bool
  Default is FALSE If true, a 1px light border is added to the bottom of the list item.

• focusVisibleClassName string
  Default is - This prop can help identify which element has keyboard focus. The class name will be applied when the element gains the focus through keyboard interaction. It's a polyfill for the CSS :focus-visible selector. The rationale for using this feature is explained here. A polyfill can be used to apply a focus-visible class to other components if needed.

• selected bool
  Default is FALSE Use to apply selected styling.

• sx ⁠Array func| object| bool | func| object⁠
  Default is - The system prop that allows defining system overrides as well as additional CSS styles.See the sx page for more details.

Value

Object with shiny.tag class suitable for use in the UI of a Shiny app.

Description

https://mui.com/material-ui/api/list-item-icon/

Usage

ListItemIcon(...)

Arguments

Details

• children node
  Default is NA The content of the component, normally Icon, SvgIcon, or a @mui/icons-material SVG icon element.

• classes object
  Default is NA Override or extend the styles applied to the component.See CSS classes API below for more details.

• sx ⁠Array func| object| bool | func| object⁠
  Default is NA The system prop that allows defining system overrides as well as additional CSS styles.See the sx page for more details.

Value

Object with shiny.tag class suitable for use in the UI of a Shiny app.

Description

https://mui.com/material-ui/api/list-item-secondary-action/

Usage

ListItemSecondaryAction(...)

Arguments

Details

• children node
  Default is NA The content of the component, normally an IconButton or selection control.

• classes object
  Default is NA Override or extend the styles applied to the component.See CSS classes API below for more details.

• sx ⁠Array func| object| bool | func| object⁠
  Default is NA The system prop that allows defining system overrides as well as additional CSS styles.See the sx page for more details.

Value

Object with shiny.tag class suitable for use in the UI of a Shiny app.

Description

https://mui.com/material-ui/api/list-item-text/

Usage

ListItemText(...)

Arguments

Details

• children node
  Default is - Alias for the primary prop.

• classes object
  Default is - Override or extend the styles applied to the component.See CSS classes API below for more details.

• disableTypography bool
  Default is FALSE If true, the children won't be wrapped by a Typography component. This can be useful to render an alternative Typography variant by wrapping the children (or primary) text, and optional secondary text with the Typography component.

• inset bool
  Default is FALSE If true, the children are indented. This should be used if there is no left avatar or left icon.

• primary node
  Default is - The main content element.

• primaryTypographyProps object
  Default is - These props will be forwarded to the primary typography component (as long as disableTypography is not true).Deprecated Use slotProps.primary instead. This prop will be removed in a future major release. See Migrating from deprecated APIs for more details.

• secondary node
  Default is - The secondary content element.

• secondaryTypographyProps object
  Default is - These props will be forwarded to the secondary typography component (as long as disableTypography is not true).Deprecated Use slotProps.secondary instead. This prop will be removed in a future major release. See Migrating from deprecated APIs for more details.

• slotProps ⁠{ primary?: func| object, root?: func| object, secondary?: func| object }⁠
  Default is The props used for each slot inside.

• slots ⁠{ primary?: elementType, root?: elementType, secondary?: elementType }⁠
  Default is The components used for each slot inside.

• sx ⁠Array func| object| bool | func| object⁠
  Default is - The system prop that allows defining system overrides as well as additional CSS styles.See the sx page for more details.

Value

Object with shiny.tag class suitable for use in the UI of a Shiny app.

Description

https://mui.com/material-ui/api/list-subheader/

Usage

ListSubheader(...)

Arguments

Details

• children node
  Default is - The content of the component.

• classes object
  Default is - Override or extend the styles applied to the component.See CSS classes API below for more details.

• color 'default'| 'inherit'| 'primary'
  Default is 'default' The color of the component. It supports those theme colors that make sense for this component.

• component elementType
  Default is - The component used for the root node. Either a string to use a HTML element or a component.

• disableGutters bool
  Default is FALSE If true, the List Subheader will not have gutters.

• disableSticky bool
  Default is FALSE If true, the List Subheader will not stick to the top during scroll.

• inset bool
  Default is FALSE If true, the List Subheader is indented.

• sx ⁠Array func| object| bool | func| object⁠
  Default is - The system prop that allows defining system overrides as well as additional CSS styles.See the sx page for more details.

Value

Object with shiny.tag class suitable for use in the UI of a Shiny app.

Description

https://mui.com/material-ui/react-button/

Usage

LoadingButton(...)

LoadingButton.shinyInput(inputId, ...)

updateLoadingButton.shinyInput(
  session = shiny::getDefaultReactiveDomain(),
  inputId,
  ...
)

Arguments

Value

Object with shiny.tag class suitable for use in the UI of a Shiny app.

Note

LoadingButton is part of @mui/lab, which is published on the MUI beta channel. Lab APIs may change in future minor releases.

Description

https://mui.com/material-ui/api/masonry/

Usage

Masonry(...)

Arguments

Details

• children node
  Default is - The content of the component.

• classes object
  Default is - Override or extend the styles applied to the component.See CSS classes API below for more details.

• columns ⁠Array number| string | number| object| string⁠
  Default is 4 Number of columns.

• component elementType
  Default is - The component used for the root node. Either a string to use a HTML element or a component.

• defaultColumns number
  Default is - The default number of columns of the component. This is provided for server-side rendering.

• defaultHeight number
  Default is - The default height of the component in px. This is provided for server-side rendering.

• defaultSpacing number
  Default is - The default spacing of the component. Like spacing, it is a factor of the theme's spacing. This is provided for server-side rendering.

• sequential bool
  Default is FALSE Allows using sequential order rather than adding to shortest column

• spacing ⁠Array number| string | number| object| string⁠
  Default is 1 Defines the space between children. It is a factor of the theme's spacing.

• sx ⁠Array func| object| bool | func| object⁠
  Default is - Allows defining system overrides as well as additional CSS styles.See the sx page for more details.

Value

Object with shiny.tag class suitable for use in the UI of a Shiny app.

Description

https://mui.com/material-ui/api/menu/

Usage

Menu(...)

Menu.shinyInput(inputId, ...)

updateMenu.shinyInput(
  session = shiny::getDefaultReactiveDomain(),
  inputId,
  ...
)

Arguments

Details

• open bool
  Default is - If true, the component is shown.

• anchorEl ⁠HTML element| func⁠
  Default is - An HTML element, or a function that returns one. It's used to set the position of the menu.

• autoFocus bool
  Default is TRUE If true (Default) will focus the role="menu" if no focusable child is found. Disabled children are not focusable. If you set this prop to false focus will be placed on the parent modal container. This has severe accessibility implications and should only be considered if you manage focus otherwise.

• children node
  Default is - Menu contents, normally MenuItems.

• classes object
  Default is - Override or extend the styles applied to the component.See CSS classes API below for more details.

• disableAutoFocusItem bool
  Default is FALSE When opening the menu will not focus the active item but the role="menu" unless autoFocus is also set to false. Not using the default means not following WAI-ARIA authoring practices. Please be considerate about possible accessibility implications.

• MenuListProps object
  Default is Props applied to the MenuList element.Deprecated use the slotProps.list prop instead. This prop will be removed in a future major release. See Migrating from deprecated APIs for more details.

• onClose func
  Default is - Callback fired when the component requests to be closed.Signature:function(event: object, reason: string) = voidevent The event source of the callback.reason Can be: "escapeKeyDown", "backdropClick", "tabKeyDown".

• PopoverClasses object
  Default is - classes prop applied to the Popover element.

• slotProps ⁠{ backdrop?: func| object, list?: func| object, paper?: func| object, root?: func| object, transition?: func| object }⁠
  Default is The props used for each slot inside.

• slots ⁠{ backdrop?: elementType, list?: elementType, paper?: elementType, root?: elementType, transition?: elementType }⁠
  Default is The components used for each slot inside.

• sx ⁠Array func| object| bool | func| object⁠
  Default is - The system prop that allows defining system overrides as well as additional CSS styles.See the sx page for more details.

• transitionDuration ⁠'auto'| number| { appear?: number, enter?: number, exit?: number }⁠
  Default is 'auto' The length of the transition in ms, or 'auto'

• TransitionProps object
  Default is Props applied to the transition element. By default, the element is based on this Transition component.Deprecated use the slotProps.transition prop instead. This prop will be removed in a future major release. See Migrating from deprecated APIs for more details.

• variant 'menu'| 'selectedMenu'
  Default is 'selectedMenu' The variant to use. Use menu to prevent selected items from impacting the initial focus.

Value

Object with shiny.tag class suitable for use in the UI of a Shiny app.

Note

This is an overlay surface wired as a click-reporter: input[[inputId]] holds a click count (it does not tell you which MenuItem was clicked), and the wrapper does not manage the open state. Render it with open = TRUE/FALSE and toggle visibility from the server with updateMenu.shinyInput(session, inputId, open = TRUE). For the common "open on click of a button" pattern, Menu.triggerId is simpler (open/close handled entirely client-side, no server logic).

Description

Custom Menu bound to a DOM element by id. See 'js/src/MuiMenuTriggerId.jsx'.

Usage

Menu.triggerId(triggerId, ...)

Arguments

Details

Pass 'closeOnItemClick = FALSE' to disable auto-close on click (useful when the menu contains interactive children like checkboxes).

Value

Object with 'shiny.tag' class suitable for use in the UI of a Shiny app.

Description

https://mui.com/material-ui/api/menu-item/

Usage

MenuItem(...)

MenuItem.shinyInput(inputId, ...)

updateMenuItem.shinyInput(
  session = shiny::getDefaultReactiveDomain(),
  inputId,
  ...
)

Arguments

Details

• autoFocus bool
  Default is FALSE If true, the list item is focused during the first mount. Focus will also be triggered if the value changes from false to true.

• children node
  Default is - The content of the component.

• classes object
  Default is - Override or extend the styles applied to the component.See CSS classes API below for more details.

• component elementType
  Default is - The component used for the root node. Either a string to use a HTML element or a component.

• dense bool
  Default is FALSE If true, compact vertical padding designed for keyboard and mouse input is used. The prop defaults to the value inherited from the parent Menu component.

• disableGutters bool
  Default is FALSE If true, the left and right padding is removed.

• divider bool
  Default is FALSE If true, a 1px light border is added to the bottom of the menu item.

• focusVisibleClassName string
  Default is - This prop can help identify which element has keyboard focus. The class name will be applied when the element gains the focus through keyboard interaction. It's a polyfill for the CSS :focus-visible selector. The rationale for using this feature is explained here. A polyfill can be used to apply a focus-visible class to other components if needed.

• selected bool
  Default is FALSE If true, the component is selected.

• sx ⁠Array func| object| bool | func| object⁠
  Default is - The system prop that allows defining system overrides as well as additional CSS styles.See the sx page for more details.

Value

Object with shiny.tag class suitable for use in the UI of a Shiny app.

Description

https://mui.com/material-ui/api/menu-list/

Usage

MenuList(...)

Arguments

Details

• autoFocus bool
  Default is FALSE If true, will focus the role="menu" container and move into tab order.

• autoFocusItem bool
  Default is FALSE If true, will focus the first menuitem if variant="menu" or selected item if variant="selectedMenu".

• children node
  Default is - MenuList contents, normally MenuItems.

• disabledItemsFocusable bool
  Default is FALSE If true, will allow focus on disabled items.

• disableListWrap bool
  Default is FALSE If true, the menu items will not wrap focus.

• variant 'menu'| 'selectedMenu'
  Default is 'selectedMenu' The variant to use. Use menu to prevent selected items from impacting the initial focus and the vertical alignment relative to the anchor element.

Value

Object with shiny.tag class suitable for use in the UI of a Shiny app.

Description

https://mui.com/material-ui/api/mobile-stepper/

Usage

MobileStepper(...)

Arguments

Details

• steps integer
  Default is - The total steps.

• activeStep integer
  Default is 0 Set the active step (zero based index). Defines which dot is highlighted when the variant is 'dots'.

• backButton node
  Default is - A back button element. For instance, it can be a Button or an IconButton.

• classes object
  Default is - Override or extend the styles applied to the component.See CSS classes API below for more details.

• LinearProgressProps object
  Default is - Props applied to the LinearProgress element.Deprecated Use slotProps.progress instead. This prop will be removed in a future major release. See Migrating from deprecated APIs for more details.

• nextButton node
  Default is - A next button element. For instance, it can be a Button or an IconButton.

• position 'bottom'| 'static'| 'top'
  Default is 'bottom' Set the positioning type.

• slotProps ⁠{ dot?: func| object, dots?: func| object, progress?: func| object, root?: func| object }⁠
  Default is The props used for each slot inside.

• slots ⁠{ dot?: elementType, dots?: elementType, progress?: elementType, root?: elementType }⁠
  Default is The components used for each slot inside.

• sx ⁠Array func| object| bool | func| object⁠
  Default is - The system prop that allows defining system overrides as well as additional CSS styles.See the sx page for more details.

• variant 'dots'| 'progress'| 'text'
  Default is 'dots' The variant to use.

Value

Object with shiny.tag class suitable for use in the UI of a Shiny app.

Description

https://mui.com/material-ui/api/modal/

Usage

Modal(...)

Modal.shinyInput(inputId, ...)

updateModal.shinyInput(
  session = shiny::getDefaultReactiveDomain(),
  inputId,
  ...
)

Arguments

Details

• children element
  Default is - A single child content element.This needs to be able to hold a ref.

• open bool
  Default is - If true, the component is shown.

• BackdropComponent elementType
  Default is styled(Backdrop, name: 'MuiModal', slot: 'Backdrop', overridesResolver: (props, styles) = return styles.backdrop; , )( zIndex: -1, ) A backdrop component. This prop enables custom backdrop rendering.Deprecated Use slots.backdrop instead. While this prop currently works, it will be removed in the next major version.

• BackdropProps object
  Default is - Props applied to the Backdrop element.Deprecated Use slotProps.backdrop instead.

• classes object
  Default is - Override or extend the styles applied to the component.See CSS classes API below for more details.

• closeAfterTransition bool
  Default is FALSE When set to true the Modal waits until a nested Transition is completed before closing.

• component elementType
  Default is - The component used for the root node. Either a string to use a HTML element or a component.

• components ⁠{ Backdrop?: elementType, Root?: elementType }⁠
  Default is The components used for each slot inside.Deprecated Use the slots prop instead. This prop will be removed in a future major release. See Migrating from deprecated APIs for more details.

• componentsProps ⁠{ backdrop?: func| object, root?: func| object }⁠
  Default is The extra props for the slot components. You can override the existing props or add new ones.Deprecated Use the slotProps prop instead. This prop will be removed in a future major release. See Migrating from deprecated APIs for more details.

• container ⁠HTML element| func⁠
  Default is - An HTML element or function that returns one. The container will have the portal children appended to it.You can also provide a callback, which is called in a React layout effect. This lets you set the container from a ref, and also makes server-side rendering possible.By default, it uses the body of the top-level document object, so it's simply document.body most of the time.

• disableAutoFocus bool
  Default is FALSE If true, the modal will not automatically shift focus to itself when it opens, and replace it to the last focused element when it closes. This also works correctly with any modal children that have the disableAutoFocus prop.Generally this should never be set to true as it makes the modal less accessible to assistive technologies, like screen readers.

• disableEnforceFocus bool
  Default is FALSE If true, the modal will not prevent focus from leaving the modal while open.Generally this should never be set to true as it makes the modal less accessible to assistive technologies, like screen readers.

• disableEscapeKeyDown bool
  Default is FALSE If true, hitting escape will not fire the onClose callback.

• disablePortal bool
  Default is FALSE The children will be under the DOM hierarchy of the parent component.

• disableRestoreFocus bool
  Default is FALSE If true, the modal will not restore focus to previously focused element once modal is hidden or unmounted.

• disableScrollLock bool
  Default is FALSE Disable the scroll lock behavior.

• hideBackdrop bool
  Default is FALSE If true, the backdrop is not rendered.

• keepMounted bool
  Default is FALSE Always keep the children in the DOM. This prop can be useful in SEO situation or when you want to maximize the responsiveness of the Modal.

• onClose func
  Default is - Callback fired when the component requests to be closed. The reason parameter can optionally be used to control the response to onClose.Signature:function(event: object, reason: string) = voidevent The event source of the callback.reason Can be: "escapeKeyDown", "backdropClick".

• onTransitionEnter func
  Default is - A function called when a transition enters.

• onTransitionExited func
  Default is - A function called when a transition has exited.

• slotProps ⁠{ backdrop?: func| object, root?: func| object }⁠
  Default is The props used for each slot inside the Modal.

• slots ⁠{ backdrop?: elementType, root?: elementType }⁠
  Default is The components used for each slot inside the Modal. Either a string to use a HTML element or a component.

• sx ⁠Array func| object| bool | func| object⁠
  Default is - The system prop that allows defining system overrides as well as additional CSS styles.See the sx page for more details.

Value

Object with shiny.tag class suitable for use in the UI of a Shiny app.

Note

This is an overlay surface wired as a click-reporter: input[[inputId]] holds a click count, and the wrapper does not manage the open state. Render it with open = TRUE/FALSE and toggle visibility from the server with updateModal.shinyInput(session, inputId, open = TRUE). For the common "open on click of a button" pattern, Modal.triggerId is simpler (open/close handled entirely client-side, no server logic).

Description

Custom Modal bound to a DOM element by id. See 'js/src/MuiModalTriggerId.jsx'. Open/close state is managed entirely client-side.

Usage

Modal.triggerId(triggerId, ...)

Arguments

Value

Object with 'shiny.tag' class suitable for use in the UI of a Shiny app.

Description

muiMaterial JS dependency

Usage

muiMaterialDependency()

Value

HTML dependency object.

Description

Launch a Shiny example app or list the available examples. Use 'muiMaterial::muiMaterialExample("showcase")' to run a showcase app with all the components.

Usage

muiMaterialExample(example = NULL, ...)

Arguments

Details

This function is adapted from 'runExample()' in the shiny.blueprint package.

Value

When 'example' is 'NULL', a character vector of the available example names. Otherwise the function launches a Shiny app and does not return; interrupt R to stop it (usually by pressing Ctrl+C or Esc).

Description

Creates a Material UI page without Bootstrap and with 0 margin in body by default. You can choose to use Google Roboto font as well as Google icons fonts with the 'Icon()' component.

Usage

muiMaterialPage(
  ...,
  useFontRoboto = FALSE,
  useMaterialIconsFilled = FALSE,
  useMaterialIconsOutlined = FALSE,
  useMaterialIconsRounded = FALSE,
  useMaterialIconsTwoTones = FALSE,
  suppressBootstrap = TRUE,
  styleBody = "margin:0",
  debugReact = FALSE
)

Arguments

Details

The Bootstrap library is suppressed by default, as it doesn't work well with Material UI in general. The full set of available Material Icon names is at <https://fonts.google.com/icons?icon.set=Material+Icons>.

Value

html object with 'margin:0' which can be passed as the UI of a Shiny app.

Examples

library(shiny)
library(muiMaterial)

ui <- muiMaterialPage(
  useFontRoboto = TRUE,
  useMaterialIconsFilled = TRUE,
  Box(
    sx = list(p = 2),
    Typography("Hello Material UI!", variant = "h4"),
    Icon("home")
  )
)

shinyApp(ui, function(input, output, session) {})

Description

https://mui.com/material-ui/api/native-select/

Usage

NativeSelect(...)

NativeSelect.shinyInput(inputId, ..., value = defaultValue)

updateNativeSelect.shinyInput(
  session = shiny::getDefaultReactiveDomain(),
  inputId,
  ...
)

Arguments

Details

• children node
  Default is - The option elements to populate the select with. Can be some option elements.

• classes object
  Default is Override or extend the styles applied to the component.See CSS classes API below for more details.

• IconComponent elementType
  Default is ArrowDropDownIcon The icon that displays the arrow.

• input element
  Default is Input / An Input element; does not have to be a material-ui specific Input.

• inputProps object
  Default is - Attributes applied to the select element.

• onChange func
  Default is - Callback fired when a menu item is selected.Signature:function(event: React.ChangeEvent) = voidevent The event source of the callback. You can pull out the new value by accessing event.target.value (string).

• sx ⁠Array func| object| bool | func| object⁠
  Default is - The system prop that allows defining system overrides as well as additional CSS styles.See the sx page for more details.

• value any
  Default is - The input value. The DOM API casts this to a string.

• variant 'filled'| 'outlined'| 'standard'
  Default is - The variant to use.

Value

Object with shiny.tag class suitable for use in the UI of a Shiny app.

Description

https://mui.com/material-ui/api/no-ssr/

Usage

NoSsr(...)

Arguments

Details

• children node
  Default is - You can wrap a node.

• defer bool
  Default is FALSE If true, the component will not only prevent server-side rendering. It will also defer the rendering of the children into a different screen frame.

• fallback node
  Default is null The fallback content to display.

Value

Object with shiny.tag class suitable for use in the UI of a Shiny app.

Description

https://mui.com/material-ui/api/outlined-input/

Usage

OutlinedInput(...)

OutlinedInput.shinyInput(inputId, ..., value = defaultValue)

updateOutlinedInput.shinyInput(
  session = shiny::getDefaultReactiveDomain(),
  inputId,
  ...
)

Arguments

Details

• autoComplete string
  Default is - This prop helps users to fill forms faster, especially on mobile devices. The name can be confusing, as it's more like an autofill. You can learn more about it following the specification.

• autoFocus bool
  Default is - If true, the input element is focused during the first mount.

• classes object
  Default is - Override or extend the styles applied to the component.See CSS classes API below for more details.

• color 'primary'| 'secondary'| string
  Default is - The color of the component. It supports both default and custom theme colors, which can be added as shown in the palette customization guide. The prop defaults to the value ('primary') inherited from the parent FormControl component.

• components ⁠{ Input?: elementType, Root?: elementType }⁠
  Default is The components used for each slot inside.Deprecated use the slots prop instead. This prop will be removed in a future major release. See Migrating from deprecated APIs for more details.

• defaultValue any
  Default is - The default value. Use when the component is not controlled.

• disabled bool
  Default is - If true, the component is disabled. The prop defaults to the value (false) inherited from the parent FormControl component.

• endAdornment node
  Default is - End InputAdornment for this component.

• error bool
  Default is - If true, the input will indicate an error. The prop defaults to the value (false) inherited from the parent FormControl component.

• fullWidth bool
  Default is FALSE If true, the input will take up the full width of its container.

• id string
  Default is - The id of the input element.

• inputComponent elementType
  Default is 'input' The component used for the input element. Either a string to use a HTML element or a component.

• inputProps object
  Default is Attributes applied to the input element.

• inputRef ref
  Default is - Pass a ref to the input element.

• label node
  Default is - The label of the input. It is only used for layout. The actual labelling is handled by InputLabel.

• margin 'dense'| 'none'
  Default is - If dense, will adjust vertical spacing. This is normally obtained via context from FormControl. The prop defaults to the value ('none') inherited from the parent FormControl component.

• maxRows number| string
  Default is - Maximum number of rows to display when multiline option is set to true.

• minRows number| string
  Default is - Minimum number of rows to display when multiline option is set to true.

• multiline bool
  Default is FALSE If true, a TextareaAutosize element is rendered.

• name string
  Default is - Name attribute of the input element.

• notched bool
  Default is - If true, the outline is notched to accommodate the label.

• onChange func
  Default is - Callback fired when the value is changed.Signature:function(event: React.ChangeEvent) = voidevent The event source of the callback. You can pull out the new value by accessing event.target.value (string).

• placeholder string
  Default is - The short hint displayed in the input before the user enters a value.

• readOnly bool
  Default is - It prevents the user from changing the value of the field (not from interacting with the field).

• required bool
  Default is - If true, the input element is required. The prop defaults to the value (false) inherited from the parent FormControl component.

• rows number| string
  Default is - Number of rows to display when multiline option is set to true.

• slots ⁠{ input?: elementType, root?: elementType }⁠
  Default is The components used for each slot inside.This prop is an alias for the components prop, which will be deprecated in the future.

• startAdornment node
  Default is - Start InputAdornment for this component.

• sx ⁠Array func| object| bool | func| object⁠
  Default is - The system prop that allows defining system overrides as well as additional CSS styles.See the sx page for more details.

• type string
  Default is 'text' Type of the input element. It should be a valid HTML5 input type.

• value any
  Default is - The value of the input element, required for a controlled component.

Value

Object with shiny.tag class suitable for use in the UI of a Shiny app.

Description

https://mui.com/material-ui/api/pagination/

Usage

Pagination(...)

Pagination.shinyInput(inputId, ..., value = defaultValue)

updatePagination.shinyInput(
  session = shiny::getDefaultReactiveDomain(),
  inputId,
  ...
)

Arguments

Details

• boundaryCount integer
  Default is 1 Number of always visible pages at the beginning and end.

• classes object
  Default is - Override or extend the styles applied to the component.See CSS classes API below for more details.

• color 'primary'| 'secondary'| 'standard'| string
  Default is 'standard' The active color. It supports both default and custom theme colors, which can be added as shown in the palette customization guide.

• count integer
  Default is 1 The total number of pages.

• defaultPage integer
  Default is 1 The page selected by default when the component is uncontrolled.

• disabled bool
  Default is FALSE If true, the component is disabled.

• getItemAriaLabel func
  Default is - Accepts a function which returns a string value that provides a user-friendly name for the current page. This is important for screen reader users.For localization purposes, you can use the provided translations.Signature:function(type: string, page: number | null, selected: boolean) = stringtype The link or button type to format ('page' | 'first' | 'last' | 'next' | 'previous' | 'start-ellipsis' | 'end-ellipsis'). Defaults to 'page'.page The page number to format.selected If true, the current page is selected.

• hideNextButton bool
  Default is FALSE If true, hide the next-page button.

• hidePrevButton bool
  Default is FALSE If true, hide the previous-page button.

• onChange func
  Default is - Callback fired when the page is changed.Signature:function(event: React.ChangeEvent, page: number) = voidevent The event source of the callback.page The page selected.

• page integer
  Default is - The current page. Unlike TablePagination, which starts numbering from 0, this pagination starts from 1.

• renderItem func
  Default is (item) = PaginationItem ...item / Render the item.Signature:function(params: PaginationRenderItemParams) = ReactNodeparams The props to spread on a PaginationItem.

• shape 'circular'| 'rounded'
  Default is 'circular' The shape of the pagination items.

• showFirstButton bool
  Default is FALSE If true, show the first-page button.

• showLastButton bool
  Default is FALSE If true, show the last-page button.

• siblingCount integer
  Default is 1 Number of always visible pages before and after the current page.

• size 'small'| 'medium'| 'large'| string
  Default is 'medium' The size of the component.

• sx ⁠Array func| object| bool | func| object⁠
  Default is - The system prop that allows defining system overrides as well as additional CSS styles.See the sx page for more details.

• variant 'outlined'| 'text'| string
  Default is 'text' The variant to use.

Value

Object with shiny.tag class suitable for use in the UI of a Shiny app.

Description

https://mui.com/material-ui/api/pagination-item/

Usage

PaginationItem(...)

Arguments

Details

• classes object
  Default is - Override or extend the styles applied to the component.See CSS classes API below for more details.

• color 'primary'| 'secondary'| 'standard'| string
  Default is 'standard' The active color. It supports both default and custom theme colors, which can be added as shown in the palette customization guide.

• component elementType
  Default is - The component used for the root node. Either a string to use a HTML element or a component.

• components ⁠{ first?: elementType, last?: elementType, next?: elementType, previous?: elementType }⁠
  Default is The components used for each slot inside.This prop is an alias for the slots prop. It's recommended to use the slots prop instead.Deprecated use the slots prop instead. This prop will be removed in a future major release. See Migrating from deprecated APIs for more details.

• disabled bool
  Default is FALSE If true, the component is disabled.

• page node
  Default is - The current page number.

• selected bool
  Default is FALSE If true the pagination item is selected.

• shape 'circular'| 'rounded'
  Default is 'circular' The shape of the pagination item.

• size 'small'| 'medium'| 'large'| string
  Default is 'medium' The size of the component.

• slotProps ⁠{ first?: func| object, last?: func| object, next?: func| object, previous?: func| object }⁠
  Default is The props used for each slot inside.

• slots ⁠{ first?: elementType, last?: elementType, next?: elementType, previous?: elementType }⁠
  Default is The components used for each slot inside.

• sx ⁠Array func| object| bool | func| object⁠
  Default is - The system prop that allows defining system overrides as well as additional CSS styles.See the sx page for more details.

• type 'end-ellipsis'| 'first'| 'last'| 'next'| 'page'| 'previous'| 'start-ellipsis'
  Default is 'page' The type of pagination item.

• variant 'outlined'| 'text'| string
  Default is 'text' The variant to use.

Value

Object with shiny.tag class suitable for use in the UI of a Shiny app.

Description

https://mui.com/material-ui/api/paper/

Usage

Paper(...)

Arguments

Details

• children node
  Default is - The content of the component.

• classes object
  Default is - Override or extend the styles applied to the component.See CSS classes API below for more details.

• component elementType
  Default is - The component used for the root node. Either a string to use a HTML element or a component.

• elevation integer
  Default is 1 Shadow depth, corresponds to dp in the spec. It accepts values between 0 and 24 inclusive.

• square bool
  Default is FALSE If true, rounded corners are disabled.

• sx ⁠Array func| object| bool | func| object⁠
  Default is - The system prop that allows defining system overrides as well as additional CSS styles.See the sx page for more details.

• variant 'elevation'| 'outlined'| string
  Default is 'elevation' The variant to use.

Value

Object with shiny.tag class suitable for use in the UI of a Shiny app.

Description

https://mui.com/material-ui/api/popover/

Usage

Popover(...)

Arguments

Details

• open bool
  Default is - If true, the component is shown.

• action ref
  Default is - A ref for imperative actions. It currently only supports updatePosition() action.

• anchorEl ⁠HTML element| func⁠
  Default is - An HTML element, PopoverVirtualElement, or a function that returns either. It's used to set the position of the popover.

• anchorOrigin ⁠{ horizontal: 'center'| 'left'| 'right'| number, vertical: 'bottom'| 'center'| 'top'| number }⁠
  Default is vertical: 'top', horizontal: 'left', This is the point on the anchor where the popover's anchorEl will attach to. This is not used when the anchorReference is 'anchorPosition'.Options: vertical: top, center, bottom; horizontal: left, center, right.

• anchorPosition ⁠{ left: number, top: number }⁠
  Default is - This is the position that may be used to set the position of the popover. The coordinates are relative to the application's client area.

• anchorReference 'anchorEl'| 'anchorPosition'| 'none'
  Default is 'anchorEl' This determines which anchor prop to refer to when setting the position of the popover.

• BackdropComponent elementType
  Default is styled(Backdrop, name: 'MuiModal', slot: 'Backdrop', overridesResolver: (props, styles) = return styles.backdrop; , )( zIndex: -1, ) A backdrop component. This prop enables custom backdrop rendering.Deprecated Use slots.backdrop instead. This prop will be removed in a future major release. See Migrating from deprecated APIs for more details.

• BackdropProps object
  Default is - Props applied to the Backdrop element.Deprecated Use slotProps.backdrop instead. This prop will be removed in a future major release. See Migrating from deprecated APIs for more details.

• children node
  Default is - The content of the component.

• classes object
  Default is - Override or extend the styles applied to the component.See CSS classes API below for more details.

• container ⁠HTML element| func⁠
  Default is - An HTML element, component instance, or function that returns either. The container will passed to the Modal component.By default, it uses the body of the anchorEl's top-level document object, so it's simply document.body most of the time.

• disableScrollLock bool
  Default is FALSE Disable the scroll lock behavior.

• elevation integer
  Default is 8 The elevation of the popover.

• marginThreshold number
  Default is 16 Specifies how close to the edge of the window the popover can appear. If null, the popover will not be constrained by the window.

• onClose func
  Default is - Callback fired when the component requests to be closed. The reason parameter can optionally be used to control the response to onClose.

• PaperProps ⁠{ component?: element type }⁠
  Default is Props applied to the Paper element.This prop is an alias for slotProps.paper and will be overriden by it if both are used.Deprecated Use slotProps.paper instead.

• slotProps ⁠{ backdrop?: func| object, paper?: func| object, root?: func| object, transition?: func| object }⁠
  Default is The props used for each slot inside.

• slots ⁠{ backdrop?: elementType, paper?: elementType, root?: elementType, transition?: elementType }⁠
  Default is The components used for each slot inside.

• sx ⁠Array func| object| bool | func| object⁠
  Default is - The system prop that allows defining system overrides as well as additional CSS styles.See the sx page for more details.

• transformOrigin ⁠{ horizontal: 'center'| 'left'| 'right'| number, vertical: 'bottom'| 'center'| 'top'| number }⁠
  Default is vertical: 'top', horizontal: 'left', This is the point on the popover which will attach to the anchor's origin.Options: vertical: top, center, bottom, x(px); horizontal: left, center, right, x(px).

• TransitionComponent elementType
  Default is Grow The component used for the transition. Follow this guide to learn more about the requirements for this component.Deprecated use the slots.transition prop instead. This prop will be removed in a future major release. See Migrating from deprecated APIs for more details.

• transitionDuration ⁠'auto'| number| { appear?: number, enter?: number, exit?: number }⁠
  Default is 'auto' Set to 'auto' to automatically calculate transition time based on height.

• TransitionProps object
  Default is Props applied to the transition element. By default, the element is based on this Transition component.Deprecated use the slotProps.transition prop instead. This prop will be removed in a future major release. See Migrating from deprecated APIs for more details.

Value

Object with shiny.tag class suitable for use in the UI of a Shiny app.

Description

Custom Popover bound to a DOM element by id. See 'js/src/MuiPopoverTriggerId.jsx'. The trigger element acts as the anchor; the Popover opens on click and closes on clickaway.

Usage

Popover.triggerId(triggerId, ...)

Arguments

Value

Object with 'shiny.tag' class suitable for use in the UI of a Shiny app.

Description

https://mui.com/material-ui/api/popper/

Usage

Popper(...)

Arguments

Details

• open bool
  Default is - If true, the component is shown.

• anchorEl ⁠HTML element| object| func⁠
  Default is - An HTML element, virtualElement, or a function that returns either. It's used to set the position of the popper. The return value will passed as the reference object of the Popper instance.

• children node| func
  Default is - Popper render function or node.

• component elementType
  Default is - The component used for the root node. Either a string to use a HTML element or a component.

• components ⁠{ Root?: elementType }⁠
  Default is The components used for each slot inside the Popper. Either a string to use a HTML element or a component.Deprecated use the slots prop instead. This prop will be removed in a future major release. How to migrate.

• componentsProps ⁠{ root?: func| object }⁠
  Default is The props used for each slot inside the Popper.Deprecated use the slotProps prop instead. This prop will be removed in a future major release. How to migrate.

• container ⁠HTML element| func⁠
  Default is - An HTML element or function that returns one. The container will have the portal children appended to it.You can also provide a callback, which is called in a React layout effect. This lets you set the container from a ref, and also makes server-side rendering possible.By default, it uses the body of the top-level document object, so it's simply document.body most of the time.

• disablePortal bool
  Default is FALSE The children will be under the DOM hierarchy of the parent component.

• keepMounted bool
  Default is FALSE Always keep the children in the DOM. This prop can be useful in SEO situation or when you want to maximize the responsiveness of the Popper.

• modifiers ⁠Array { data?: object, effect?: func, enabled?: bool, fn?: func, name?: any, options?: object, phase?: 'afterMain'| 'afterRead'| 'afterWrite'| 'beforeMain'| 'beforeRead'| 'beforeWrite'| 'main'| 'read'| 'write', requires?: Array string , requiresIfExists?: Array string } ⁠
  Default is - Popper.js is based on a "plugin-like" architecture, most of its features are fully encapsulated "modifiers".A modifier is a function that is called each time Popper.js needs to compute the position of the popper. For this reason, modifiers should be very performant to avoid bottlenecks. To learn how to create a modifier, read the modifiers documentation.

• placement 'auto-end'| 'auto-start'| 'auto'| 'bottom-end'| 'bottom-start'| 'bottom'| 'left-end'| 'left-start'| 'left'| 'right-end'| 'right-start'| 'right'| 'top-end'| 'top-start'| 'top'
  Default is 'bottom' Popper placement.

• popperOptions ⁠{ modifiers?: array, onFirstUpdate?: func, placement?: 'auto-end'| 'auto-start'| 'auto'| 'bottom-end'| 'bottom-start'| 'bottom'| 'left-end'| 'left-start'| 'left'| 'right-end'| 'right-start'| 'right'| 'top-end'| 'top-start'| 'top', strategy?: 'absolute'| 'fixed' }⁠
  Default is Options provided to the Popper.js instance.

• popperRef ref
  Default is - A ref that points to the used popper instance.

• slotProps ⁠{ root?: func| object }⁠
  Default is The props used for each slot inside the Popper.

• slots ⁠{ root?: elementType }⁠
  Default is The components used for each slot inside the Popper. Either a string to use a HTML element or a component.

• sx ⁠Array func| object| bool | func| object⁠
  Default is - The system prop that allows defining system overrides as well as additional CSS styles.See the sx page for more details.

• transition bool
  Default is FALSE Help supporting a react-transition-group/Transition component.

Value

Object with shiny.tag class suitable for use in the UI of a Shiny app.

Description

https://mui.com/material-ui/api/portal/

Usage

Portal(...)

Arguments

Details

• children node
  Default is - The children to render into the container.

• container ⁠HTML element| func⁠
  Default is - An HTML element or function that returns one. The container will have the portal children appended to it.You can also provide a callback, which is called in a React layout effect. This lets you set the container from a ref, and also makes server-side rendering possible.By default, it uses the body of the top-level document object, so it's simply document.body most of the time.

• disablePortal bool
  Default is FALSE The children will be under the DOM hierarchy of the parent component.

Value

Object with shiny.tag class suitable for use in the UI of a Shiny app.

Description

When called interactively, renders the component in the IDE viewer panel. Otherwise, falls back to standard shiny.tag printing (raw HTML text).

Usage

## S3 method for class 'muiMaterial'
print(x, browse = interactive(), ...)

Arguments

Value

Invisibly returns x.

Description

https://mui.com/material-ui/api/radio/

Usage

Radio(...)

Radio.shinyInput(inputId, ..., value = defaultValue)

updateRadio.shinyInput(
  session = shiny::getDefaultReactiveDomain(),
  inputId,
  ...
)

Arguments

Details

• checked bool
  Default is - If true, the component is checked.

• checkedIcon node
  Default is RadioButtonIcon checked / The icon to display when the component is checked.

• classes object
  Default is - Override or extend the styles applied to the component.See CSS classes API below for more details.

• color 'default'| 'primary'| 'secondary'| 'error'| 'info'| 'success'| 'warning'| string
  Default is 'primary' The color of the component. It supports both default and custom theme colors, which can be added as shown in the palette customization guide.

• disabled bool
  Default is - If true, the component is disabled.

• disableRipple bool
  Default is FALSE If true, the ripple effect is disabled.

• icon node
  Default is RadioButtonIcon / The icon to display when the component is unchecked.

• id string
  Default is - The id of the input element.

• inputProps object
  Default is - Attributes applied to the input element.Deprecated Use slotProps.input instead. This prop will be removed in a future major release. See Migrating from deprecated APIs for more details.

• inputRef ref
  Default is - Pass a ref to the input element.Deprecated Use slotProps.input.ref instead. This prop will be removed in a future major release. See Migrating from deprecated APIs for more details.

• name string
  Default is - Name attribute of the input element.

• onChange func
  Default is - Callback fired when the state is changed.Signature:function(event: React.ChangeEvent) = voidevent The event source of the callback. You can pull out the new value by accessing event.target.value (string). You can pull out the new checked state by accessing event.target.checked (boolean).

• required bool
  Default is FALSE If true, the input element is required.

• size 'medium'| 'small'| string
  Default is 'medium' The size of the component. small is equivalent to the dense radio styling.

• slotProps ⁠{ input?: func| object, root?: func| object }⁠
  Default is The props used for each slot inside.

• slots ⁠{ input?: elementType, root?: elementType }⁠
  Default is The components used for each slot inside.

• sx ⁠Array func| object| bool | func| object⁠
  Default is - The system prop that allows defining system overrides as well as additional CSS styles.See the sx page for more details.

• value any
  Default is - The value of the component. The DOM API casts this to a string.

Value

Object with shiny.tag class suitable for use in the UI of a Shiny app.

Note

A standalone Radio.shinyInput reports a boolean (checked) to the server, not the selected option string. For mutually-exclusive option groups use RadioGroup.shinyInput instead, which reports the string value of the selected radio.

See Also

RadioGroup.shinyInput

Description

https://mui.com/material-ui/api/radio-group/

Usage

RadioGroup(...)

RadioGroup.shinyInput(inputId, ..., value = defaultValue)

updateRadioGroup.shinyInput(
  session = shiny::getDefaultReactiveDomain(),
  inputId,
  ...
)

Arguments

Details

• children node
  Default is NA The content of the component.

• defaultValue any
  Default is NA The default value. Use when the component is not controlled.

• name string
  Default is NA The name used to reference the value of the control. If you don't provide this prop, it falls back to a randomly generated name.

• onChange func
  Default is NA Callback fired when a radio button is selected.Signature:function(event: React.ChangeEvent, value: string) = voidevent The event source of the callback.value The value of the selected radio button. You can pull out the new value by accessing event.target.value (string).

• value any
  Default is NA Value of the selected radio button. The DOM API casts this to a string.

Value

Object with shiny.tag class suitable for use in the UI of a Shiny app.

Description

https://mui.com/material-ui/api/rating/

Usage

Rating(...)

Rating.shinyInput(inputId, ..., value = defaultValue)

updateRating.shinyInput(
  session = shiny::getDefaultReactiveDomain(),
  inputId,
  ...
)

Arguments

Details

• classes object
  Default is - Override or extend the styles applied to the component.See CSS classes API below for more details.

• component elementType
  Default is - The component used for the root node. Either a string to use a HTML element or a component.

• defaultValue number
  Default is null The default value. Use when the component is not controlled.

• disabled bool
  Default is FALSE If true, the component is disabled.

• emptyIcon node
  Default is StarBorder fontSize="inherit" / The icon to display when empty.

• emptyLabelText node
  Default is 'Empty' The label read when the rating input is empty.

• getLabelText func
  Default is function defaultLabelText(value) return ⁠$value || '0' Star$value !== 1 ? 's' : ''⁠; Accepts a function which returns a string value that provides a user-friendly name for the current value of the rating. This is important for screen reader users.For localization purposes, you can use the provided translations.Signature:function(value: number) = stringvalue The rating label's value to format.

• highlightSelectedOnly bool
  Default is FALSE If true, only the selected icon will be highlighted.

• icon node
  Default is Star fontSize="inherit" / The icon to display.

• IconContainerComponent elementType
  Default is function IconContainer(props) const value, ...other = props; return span ...other / ; The component containing the icon.Deprecated Use slotProps.icon.component instead. This prop will be removed in a future major release. See Migrating from deprecated APIs for more details.

• max number
  Default is 5 Maximum rating.

• name string
  Default is - The name attribute of the radio input elements. This input name should be unique within the page. Being unique within a form is insufficient since the name is used to generate IDs.

• onChange func
  Default is - Callback fired when the value changes.Signature:function(event: React.SyntheticEvent, value: number | null) = voidevent The event source of the callback.value The new value.

• onChangeActive func
  Default is - Callback function that is fired when the hover state changes.Signature:function(event: React.SyntheticEvent, value: number) = voidevent The event source of the callback.value The new value.

• precision number
  Default is 1 The minimum increment value change allowed.

• readOnly bool
  Default is FALSE Removes all hover effects and pointer events.

• size 'small'| 'medium'| 'large'| string
  Default is 'medium' The size of the component.

• slotProps ⁠{ decimal?: func| object, icon?: func| object, label?: func| object, root?: func| object }⁠
  Default is The props used for each slot inside.

• slots ⁠{ decimal?: elementType, icon?: elementType, label?: elementType, root?: elementType }⁠
  Default is The components used for each slot inside.

• sx ⁠Array func| object| bool | func| object⁠
  Default is - The system prop that allows defining system overrides as well as additional CSS styles.See the sx page for more details.

• value number
  Default is - The rating value.

Value

Object with shiny.tag class suitable for use in the UI of a Shiny app.

Description

https://mui.com/material-ui/api/scoped-css-baseline/

Usage

ScopedCssBaseline(...)

Arguments

Details

• children node
  Default is NA The content of the component.

• classes object
  Default is NA Override or extend the styles applied to the component.See CSS classes API below for more details.

• component elementType
  Default is NA The component used for the root node. Either a string to use a HTML element or a component.

• enableColorScheme bool
  Default is NA Enable color-scheme CSS property to use theme.palette.mode. For more details, check out https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme For browser support, check out https://caniuse.com/?search=color-scheme

• sx ⁠Array func| object| bool | func| object⁠
  Default is NA The system prop that allows defining system overrides as well as additional CSS styles.See the sx page for more details.

Value

Object with shiny.tag class suitable for use in the UI of a Shiny app.