Build faster with Premium Chakra UI Components 💎

Learn more
Skip to Content
DocsPlaygroundEnterpriseBlog
Sponsor

Show

Used to conditional render part of the view based on a condition.

Usage

The Show component renders its children when the when value is truthy, otherwise it renders the fallback prop.

import { Show } from "@chakra-ui/react"
<Show when={...} fallback={...}>
  <div>Content</div>
</Show>

Examples

Fallback

Use the fallback prop to render a fallback component when the array is empty or undefined.

Not there yet. Keep clicking...

Render Prop

Use the children render prop to narrow the type of the when value and remove undefined | null

Value: 10

Props

PropDefaultType
when
T | null | undefined

If `true`, it'll render the `children` prop

fallback
React.ReactNode

The fallback content to render if `when` is `false`

Previous

Portal

Next

Visually Hidden