# @leafygreen-ui/toggle
> LeafyGreen UI Kit Toggle
Latest version **12.1.6** (published 2026-10-02) · Apache-2.0 license · 0 weekly downloads
## Install
```sh
npm install @leafygreen-ui/toggle
pnpm add @leafygreen-ui/toggle
yarn add @leafygreen-ui/toggle
bun add @leafygreen-ui/toggle
```
## Health
**Score 70/100 (B)** — status: active.
Positive: has types; esm support; no vulnerabilities; has provenance; recently updated; high maintenance score.
Warnings: low downloads.
## Facts
| | |
|---|---|
| Version | 12.1.6 |
| Published | 2026-10-02 |
| First published | 2019-04-17 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 7 |
| Unpacked size | 143.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| Maintainers | thesonofthomp, shaneeza, stephl3, aitchpgm, hnevins, _tsck |
## Links
- npm: https://www.npmjs.com/package/@leafygreen-ui/toggle
- Repository: https://github.com/mongodb/leafygreen-ui
- Homepage: https://github.com/mongodb/leafygreen-ui/tree/main/packages/toggle
- Issues: https://jira.mongodb.org/projects/PD/summary
- npm.io page: https://npm.io/package/@leafygreen-ui/toggle
## Dependencies (7)
- [@leafygreen-ui/lib](https://npm.io/package/@leafygreen-ui/lib.md) ^15.7.1
- [@leafygreen-ui/a11y](https://npm.io/package/@leafygreen-ui/a11y.md) ^3.0.6
- [@leafygreen-ui/icon](https://npm.io/package/@leafygreen-ui/icon.md) ^14.9.1
- [@leafygreen-ui/tokens](https://npm.io/package/@leafygreen-ui/tokens.md) ^4.2.3
- [@leafygreen-ui/emotion](https://npm.io/package/@leafygreen-ui/emotion.md) ^5.2.1
- [@leafygreen-ui/palette](https://npm.io/package/@leafygreen-ui/palette.md) ^5.0.3
- [@lg-tools/test-harnesses](https://npm.io/package/@lg-tools/test-harnesses.md) ^0.3.5
## Recent versions
- 12.1.6 (latest) — 2026-10-02
- 10.0.12 (beta) — 2023-07-26
- 11.0.0-alpha.1 (alpha) — 2023-07-20
- 10.0.9-next.7 (next) — 2023-05-26
- 8.0.4-test.0 (test) — 2022-09-22
- 12.1.5 — 2026-01-21
- 12.1.4 — 2025-11-24
- 12.1.3 — 2025-11-13
- 12.1.2 — 2025-10-31
- 12.1.1 — 2025-10-21
- 12.1.0 — 2025-10-07
- 12.0.6 — 2025-09-25
- 12.0.5 — 2025-09-10
- 12.0.4 — 2025-09-03
- 12.0.3 — 2025-07-03
- … 89 more at https://npm.io/package/@leafygreen-ui/toggle/versions
## README
# Toggle
#### [View on MongoDB.design](https://www.mongodb.design/component/toggle/live-example/)
## Installation
### PNPM
```shell
pnpm add @leafygreen-ui/toggle
```
### Yarn
```shell
yarn add @leafygreen-ui/toggle
```
### NPM
```shell
npm install @leafygreen-ui/toggle
```
## Example
```js
import Toggle from '@leafygreen-ui/toggle';
return (
<>
{
/* Handle the change event */
}}
/>
);
```
## Properties
| Prop | Type | Description | Default |
| ----------- | ---------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |
| `darkMode` | `boolean` | Determines if the Toggle will render the dark mode styles. | `false` |
| `size` | `'default'`, `'small'`, `'xsmall'` | Sets the size of the toggle. | `'default'` |
| `checked` | `boolean` | Set's the checked state of the Toggle. | |
| `disabled` | `boolean` | Disables the Toggle. | `false` |
| `onChange` | `(checked, MouseEvent) => void` | `onChange` fires when the `checked` state of the component is being updated. Receives the updated checked state of the toggle as its first argument, and the associated mouse event as the second. | |
| `className` | `string` | Adds a className to the outermost element. | `''` |
| ... | HTML `button` attributes | Any supported HTML button properties will be applied to the `button` element. | |
## Accessibility
For the Toggle to be accessible to screen readers, you **must** pass either [`aria-label`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute) or [`aria-labelledby`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute) to Toggle. Please note, if this is a part of a form, this is in addition to using `htmlFor` to associate a label with the Toggle. You will see TypeScript and console errors if this isn't done.
Please reach out if you would like further guidance on how to programmatically associate text with the Toggle component.
# Test Harnesses
## getTestUtils()
`getTestUtils()` is a util that allows consumers to reliably interact with `LG Toggle` in a product test suite. If the `Toggle` component cannot be found, an error will be thrown.
### Usage
```tsx
import Toggle, { getTestUtils } from '@leafygreen-ui/toggle';
const utils = getTestUtils(lgId?: string); // lgId refers to the custom `data-lgid` attribute passed to `Toggle`. It defaults to 'lg-toggle' if left empty.
```
#### Single `Toggle`
```tsx
import { render } from '@testing-library/react';
import Toggle, { getTestUtils } from '@leafygreen-ui/toggle';
...
test('toggle', () => {
render();
const { getInput, getInputValue } = getTestUtils();
expect(getInput()).toBeInTheDocument();
expect(getInputValue()).toBe(false);
});
```
#### Multiple `Toggle`'s
When testing multiple `Toggle`'s it is recommended to add the custom `data-lgid` attribute to each `Toggle`.
```tsx
import { render } from '@testing-library/react';
import Toggle, { getTestUtils } from '@leafygreen-ui/toggle';
...
test('toggle', () => {
render(
<>
,
);
const utilsOne = getTestUtils('toggle-1'); // data-lgid
const utilsTwo = getTestUtils('toggle-2'); // data-lgid
// First toggle
expect(utilsOne.getInput()).toBeInTheDocument();
expect(utilsOne.getInputValue()).toBe(false);
// Second Toggle
expect(utilsTwo.getInput()).toBeInTheDocument();
expect(utilsTwo.getInputValue()).toBe(true);
});
```
#### Toggle with other LG form elements
```tsx
import { render } from '@testing-library/react';
import Toggle, { getTestUtils as getToggleTestUtils } from '@leafygreen-ui/toggle';
import TextInput, { getTestUtils as getTextInputTestUtils } from '@leafygreen-ui/text-input';
import TextArea, { getTestUtils as getTextAreaTestUtils } from '@leafygreen-ui/text-area';
...
test('Form', () => {
render(
,
);
const toggleInputUtils = getToggleTestUtils();
const textInputUtils = getTextInputTestUtils();
const textAreaUtils = getTextAreaTestUtils();
// LG Toggle
expect(toggleInputUtils.getInput()).toBeInTheDocument();
expect(toggleInputUtils.getInputValue()).toBe(false);
// LG TextInput
expect(textInputUtils.getInput()).toBeInTheDocument();
expect(textInputUtils.getInputValue()).toBe('');
// LG TextArea
expect(textAreaUtils.getInput()).toBeInTheDocument();
expect(textAreaUtils.getInputValue()).toBe('');
});
```
### Test Utils
#### Elements
```tsx
const { getInput, isDisabled, getInputValue } = getTestUtils();
```
| Util | Description | Returns |
| --------------- | ------------------------------------- | ------------------- |
| `getInput` | Returns the input node | `HTMLButtonElement` |
| `isDisabled` | Returns whether the input is disabled | `boolean` |
| `getInputValue` | Returns the input value | `boolean` |
---
_Source: https://npm.io/package/@leafygreen-ui/toggle · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._