# useToggle

*Category:* Utilities
*Section:* Lifecycle & execution hooks
*Source:* https://uikit.developers.rio.cloud/#/utilities/useToggle
*Captured:* 2026-04-27T14:59:32.111Z

The useToggle hook is a custom React hook for managing a boolean state. It provides an intuitive API to toggle, enable, or disable the value. You can optionally initialize it with a default state. Use it to handle toggle-based logic like switches, modals, or content visibility in your React components.

## useToggle

### Example: Example 1

Usage on buttons Toggle is OFF
Toggle Enable Disable Usage on a Switch component

Usage for hiding content Hide content
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.

#### React (tsx)

```tsx
import Button from '@rio-cloud/rio-uikit/Button';
import useToggle from '@rio-cloud/rio-uikit/useToggle';
import Switch from '@rio-cloud/rio-uikit/Switch';
import Fade from '@rio-cloud/rio-uikit/Fade';
import { dummyText } from '../../../utils/data';

export default () => {
    const { isToggled, toggle, enable, disable } = useToggle();

    const { isToggled: isSwitchToggled, toggle: toggleSwitch } = useToggle(true);

    const { isToggled: isContentShown, toggle: toggleContent } = useToggle(true);

    const handleToggleButton = () => {
        toggle(newValue => {
            console.log(`Toggle changed to: ${newValue}`);
            // Add some tracking here
        });
    };

    return (
        <div>
            <label>Usage on buttons</label>
            <p>Toggle is {isToggled ? 'ON' : 'OFF'}</p>
            <div className='btn-toolbar'>
                <Button onClick={handleToggleButton}>Toggle</Button>
                <Button onClick={enable}>Enable</Button>
                <Button onClick={disable}>Disable</Button>
            </div>
            <hr />
            <label>Usage on a Switch component</label>
            <Switch checked={isSwitchToggled} onChange={() => toggleSwitch()} />
            <hr />
            <label>Usage for hiding content</label>
            <div>
                <Button onClick={toggleContent}>{isContentShown ? 'Hide content' : 'Show content'}</Button>
                <Fade show={isContentShown}>{dummyText}</Fade>
            </div>
        </div>
    );
};
```

#### HTML (html)

```html
<div>
    <label>Usage on buttons</label>
    <p>Toggle is OFF</p>
    <div class="btn-toolbar">
        <button type="button" class="btn btn-default btn-component" tabindex="0">Toggle</button>
        <button type="button" class="btn btn-default btn-component" tabindex="0">Enable</button>
        <button type="button" class="btn btn-default btn-component" tabindex="0">Disable</button>
    </div>
    <hr>
    <label>Usage on a Switch component</label>
    <div class="uikit-switch">
        <label class="switch-label uikit-switch">
            <input type="checkbox" class="switch-input" checked="">
            <div class="switch-content" style="color: var(--brand-primary); min-width: 40px;">
                <div class="switch-handle">
                </div>
            </div>
        </label>
    </div>
    <hr>
    <label>Usage for hiding content</label>
    <div>
        <button type="button" class="btn btn-default btn-component" tabindex="0">Hide content</button>
        <div style="opacity: 1; transform: none;">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.</div>
    </div>
</div>
```

#### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| initialValue | Boolean | — | The initial state of the toggle. Defaults to false. |
| toggle | Function | — | Toggles the current state between true and false. Accepts an optional callback function that executes after the state changes, receiving the new state as an argument. |
| enable | Function | — | Sets the toggle state to true. |
| disable | Function | — | Sets the toggle state to false. |