Hidden API

API reference docs for the React Hidden component. Learn about the props, CSS, and other APIs of this exported module.

Demos

For examples and details on the usage of this React component, visit the component demo pages:

import Hidden from '@mui/material/Hidden';
// or
import { Hidden } from '@mui/material';

Responsively hides children based on the selected implementation.

Props of the native component are also available.

Name	Type	Default	Description
children	node		The content of the component.
implementation	'css' \| 'js'	'js'	Specify which implementation to use. 'js' is the default, 'css' works better for server-side rendering.
initialWidth	'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'		You can use this prop when choosing the `js` implementation with server-side rendering. As `window.innerWidth` is unavailable on the server, we default to rendering an empty component during the first mount. You might want to use a heuristic to approximate the screen width of the client browser screen width. For instance, you could be using the user-agent or the client-hints. https://caniuse.com/#search=client%20hint
lgDown	bool	false	If `true`, screens this size and down are hidden.
lgUp	bool	false	If `true`, screens this size and up are hidden.
mdDown	bool	false	If `true`, screens this size and down are hidden.
mdUp	bool	false	If `true`, screens this size and up are hidden.
only	'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| Array<'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'>		Hide the given breakpoint(s).
smDown	bool	false	If `true`, screens this size and down are hidden.
smUp	bool	false	If `true`, screens this size and up are hidden.
xlDown	bool	false	If `true`, screens this size and down are hidden.
xlUp	bool	false	If `true`, screens this size and up are hidden.
xsDown	bool	false	If `true`, screens this size and down are hidden.
xsUp	bool	false	If `true`, screens this size and up are hidden.

The component cannot hold a ref.