---
title: useBoolean
description: "`useBoolean` is a custom hook used to manage boolean values using `on`, `off`, and `toggle` functions."
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>
)
```

## Usage

```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()
```

### Using Initial Values

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

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>
)
```