⦾ Chakra UI provides a lot of flexibility when it comes to controlling the display property of elements, just like any other aspect of CSS. You can use the display prop to adjust the display CSS property of a component.
Standard Display: The display prop can be set to any valid CSS display value
Flexbox: Chakra UI has first-class support for Flexbox layouts, which is integrated directly into the Box component and also has a dedicated Flex component. Chakra UI provides props for all the common Flexbox properties, such as alignItems, justifyContent, flexWrap, flexDirection, and more.
Grid: Similar to Flexbox, Chakra UI also has excellent support for CSS Grid layouts, with a dedicated Grid component
None: You can hide elements by setting the display prop to "none"
Responsive Display: As with many other props in Chakra UI, display can take an array or an object to specify different values at different breakpoints
Box Visibility: Apart from the display property, visibility of components can also be controlled using the visibility prop, which can take values of "visible" or "hidden"
This gives you a lot of power and flexibility when it comes to controlling the layout and visibility of your components.
To import the Box component used below:
Examples
display='none' makes an element not appear. (The following element does not appear.)
display='none'
The following Box only appears on medium and smaller screens:
The following Box will not appear until the screen is at least medium size.
base: "none", md: "block" configuration sets the display property to "none" for smaller screens and "block" for screens that meet or exceed the md breakpoint. This allows for responsive behavior where the element is hidden on smaller screens and displayed as a block on larger screens.
The following boxes only show on screens that are medium or smaller:
base: "block", md: "none" - hide the element from 'md' up
This box complete disappears at sizes of medium and higher.
This is a block-level element
This is an inline-block element
This box is a flex container
This flex component is also a flex container
This is a grid item
This is another grid item
Did you know?
Creative Idea No. 1
By using the display prop, you can easily toggle the display behavior of elements. In this case, the first Box component will behave like an inline element, while the second By using the display prop, you can easily toggle the display behavior of elements. In this case, the first Box component will behave like an inline element, while the second Box component will behave like a block-level element. Box component will behave like a block-level element.
Inline Box
Block Box
Code
Creative Idea No. 2
Chakra UI includes the VisuallyHidden component to visually hide an element while keeping it accessible for screen readers. This is useful when you want to hide elements from sight but still provide meaningful content for assistive technologies. In this example, the VisuallyHidden component wraps the text "Click me to perform an action". Although visually hidden, the text will still be accessible to screen readers, providing a better user experience for users with visual impairments.
Code
Creative Idea No. 3
Chakra UI provides the Flex component that makes it easy to create flexible and responsive layouts using CSS flexbox. It offers a simplified API for flexbox properties like flexDirection,justifyContent, alignItems, and more. In this example, the Flex component is used to create a flex container. Thedirection="row" prop sets the flex direction to horizontal. The justifyContent="center" and alignItems="center"props horizontally center and vertically align the flex items. This allows you to easily create flexible and responsive layouts using Chakra UI's Flex component.