---
title: useBoolean
package: '@chakra-ui/hooks'
description: 'React hook to manage boolean (on - off) states'
---

`useBoolean` is a custom hook used to manage a boolean value with `on`, `off`
and `toggle` functions.

## Import

```js
import { useBoolean } from '@chakra-ui/react'
```

## Return value

The `useBoolean` hook returns a stateful boolean value and an object with the
following function to update it:

| Name     | Type         | Description                                     |
| -------- | ------------ | ----------------------------------------------- |
| `on`     | `() => void` | A function to set the boolean value to `true`.  |
| `off`    | `() => void` | A function to set the boolean value to `false`. |
| `toggle` | `() => void` | A function to negate the boolean state.         |

## Usage

### Usage of toggle method

```jsx
function Example() {
  const [flag, setFlag] = useBoolean()

  return (
    <>
      <p>Boolean state: {flag.toString()}</p>
      <button onClick={setFlag.toggle}>
        Click me to toggle the boolean value
      </button>
    </>
  )
}
```

### Usage of on and off methods

```jsx
function Example() {
  const [flag, setFlag] = useBoolean()

  return (
    <div onMouseEnter={setFlag.on} onMouseLeave={setFlag.off}>
      {flag ? 'The flag is ON!' : 'Hover me to turn ON'}
    </div>
  )
}
```

## Parameters

The hook `useBoolean` accepts the initial boolean value, by default is `false`.