Show

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

AI TipWant to skip the docs? Use the MCP Server

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>

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

Not there yet. Keep clicking...

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

Value: 10

Prop	Default	Type
`when`		`T \| null \| undefined` If `true`, it'll render the `children` prop
`fallback`		`React.ReactNode \| undefined` The fallback content to render if `when` is `false`
`as`		`React.ElementType` The underlying element to render.
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide.