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


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:

on() => voidA function to set the boolean value to true.
off() => voidA function to set the boolean value to false.
toggle() => voidA function to negate the boolean state.


Usage of toggle method#

Boolean state: false

Editable Example

Usage of on and off methods#

Hover me to turn ON
Editable Example


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

Edit this page

Proudly made inNigeria by Segun Adebayo