---
title: Show
description: "`Show`は、条件に基づいて子要素を表示または非表示にするコンポーネントです。"
links:
  - source: https://github.com/yamada-ui/yamada-ui/tree/main/packages/react/src/components/show
  - storybook: https://yamada-ui.github.io/yamada-ui?path=/story/components-show--basic
---

```tsx
<Show when={true}>
  <Text>インビジブルガール 葉隠透</Text>
</Show>
```

## 使い方

```tsx
import { Show } from "@yamada-ui/react"
```

```tsx
import { Show } from "@/components/ui"
```

```tsx
import { Show } from "@workspaces/ui"
```

```tsx
<Show />
```

### 条件付きでレンダリングする

コンテンツを条件付きでレンダリングする場合は、`when`に真偽値を設定します。

```tsx
const [isVisible, setIsVisible] = useState(true)

return (
  <VStack>
    <Button onClick={() => setIsVisible((prev) => !prev)}>
      {isVisible ? "Hide" : "Show"} Content
    </Button>
    <Show when={isVisible}>
      <Text>インビジブルガール 葉隠透</Text>
    </Show>
  </VStack>
)
```

### フォールバックを使う

フォールバックを使う場合は、`fallback`に`ReactNode`を設定します。

```tsx
const [isVisible, setIsVisible] = useState(false)

return (
  <VStack>
    <Button onClick={() => setIsVisible((prev) => !prev)}>
      Toggle Content
    </Button>
    <Show when={isVisible} fallback={<Text color="gray.500">衣服</Text>}>
      <Text color="green.500">インビジブルガール 葉隠透</Text>
    </Show>
  </VStack>
)
```

## Props

| Prop       | Default | Type                     | Description                                         |
| ---------- | ------- | ------------------------ | --------------------------------------------------- |
| `children` | -       | `ReactNodeOrFunction<Y>` | The children to render if `when` is `true`          |
| `fallback` | -       | `ReactNode`              | The fallback content to render if `when` is `false` |
| `when`     | -       | `null \| Y`              | If `true`, it'll render the `children` prop         |