1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556
---title: atomWithTogglenav: 8.04keywords: creators,toggle---
> `atomWithToggle` creates a new atom with a boolean as initial state & a setter function to toggle it.This avoids the boilerplate of having to set up another atom just to update the state of the first.
```tsimport { WritableAtom, atom } from 'jotai'
export function atomWithToggle(  initialValue?: boolean,): WritableAtom<boolean, boolean | undefined> {  const anAtom = atom(initialValue, (get, set, nextValue?: boolean) => {    const update = nextValue ?? !get(anAtom)    set(anAtom, update)  })  return anAtom as WritableAtom<boolean, boolean | undefined>}```
An optional initial state can be provided as the first argument.
The setter function can have an optional argument to force a particular state, such as if you want to make a setActive function out of it.
Here is how it's used.
```jsimport { atomWithToggle } from 'XXX'
// will have an initial value set to trueconst isActiveAtom = atomWithToggle(true)```
And in a component:
```jsxconst Toggle = () => {  const [isActive, toggle] = useAtom(isActiveAtom)  return (    <>      <button onClick={() => toggle()}>        isActive: {isActive ? 'yes' : 'no'}      </button>      <button onClick={() => toggle(true)}>force true</button>      <button onClick={() => toggle(false)}>force false</button>    </>  )}```