---
title: useBoolean
description: "`useBoolean`は、`on`・`off`・`toggle`関数を使用して真偽値を管理するために使用されるカスタムフックです。"
links:
  - source: https://github.com/yamada-ui/yamada-ui/tree/main/packages/react/src/hooks/use-boolean
  - storybook: https://yamada-ui.github.io/yamada-ui?path=/story/hooks-useboolean--basic
---

```tsx
const [flg, { on, off, toggle }] = useBoolean()

return (
  <VStack>
    <Text>state: {String(flg)}</Text>

    <ButtonGroup.Root wrap="wrap">
      <ButtonGroup.Item onClick={on}>On</ButtonGroup.Item>
      <ButtonGroup.Item onClick={off}>Off</ButtonGroup.Item>
      <ButtonGroup.Item onClick={toggle}>Toggle</ButtonGroup.Item>
    </ButtonGroup.Root>
  </VStack>
)
```

## 使い方

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

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

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

```tsx
const [flg, { on, off, toggle }] = useBoolean()
```

### 初期値を使う

```tsx
const [flg, { on, off, toggle }] = useBoolean()

return (
  <VStack>
    <Text>state: {String(flg)}</Text>

    <ButtonGroup.Root wrap="wrap">
      <ButtonGroup.Item onClick={on}>On</ButtonGroup.Item>
      <ButtonGroup.Item onClick={off}>Off</ButtonGroup.Item>
      <ButtonGroup.Item onClick={toggle}>Toggle</ButtonGroup.Item>
    </ButtonGroup.Root>
  </VStack>
)
```