Toggle

A toggle is used to view or switch between enabled or disabled states.

17.3.2

Patch Changes

  • Updated dependencies

17.3.1

Patch Changes

  • Updated dependencies

17.3.0

Minor Changes

Patch Changes

  • Updated dependencies

17.2.0

Minor Changes

  • d82e6f76528ab, (opens new window) - Add direct subpath package exports as part of the linking-platform, search, media, and design-system barrel-removal (de-barrel) migration.

    These packages now expose their individual modules via explicit package.json exports subpaths so that consumers can import directly from the leaf module (e.g. @atlaskit/pkg/thing) instead of the package barrel/index. This adds new public entry points without changing or removing any existing exports, so it is a backwards-compatible additive change.

    No runtime behaviour changes; this is an API-surface (entry-point) addition to support tree-shaking and to unblock removal of the barrel index files.

Patch Changes

  • Updated dependencies

17.1.5

Patch Changes

17.1.4

Patch Changes

  • Updated dependencies

17.1.3

Patch Changes

  • Updated dependencies

17.1.2

Patch Changes

  • Updated dependencies

17.1.1

Patch Changes

  • Updated dependencies

17.1.0

Minor Changes

  • cd097a2111788, (opens new window) - Republish packages depending on @atlaskit/react-compiler-gating so their published dependency reference is updated to the renamed @atlaskit/react-compiler-gating scope.

    The earlier rename of @atlassian/react-compiler-gating to @atlaskit/react-compiler-gating only bumped the renamed package itself, so dependent packages were never republished and their published versions still referenced the old @atlassian/react-compiler-gating name, which is not available in the public npm registry. This minor bump republishes all affected packages with the corrected dependency.

Patch Changes

  • Updated dependencies

17.0.1

Patch Changes

17.0.0

Major Changes

  • f2dc9097319f0, (opens new window) - ### Dropped support for legacy Typescript 4 types. Typescript 5 is now the new minimum.

    Removes the typesVersions property and dist/types-ts4.5 directory from the dist.

    Types are now exclusively via the "types": "dist/types/index.d.ts" property.

    - "typesVersions": { - ">=4.5 <4.9": { - "*": [ - "dist/types-ts4.5/*", - "dist/types-ts4.5/index.d.ts" - ] - } - },

Patch Changes

  • Updated dependencies

16.1.0

Minor Changes

16.0.0

Major Changes

  • d156157c9f0f9, (opens new window) - The feature gate platform-toggle-atomic-styles has been removed. Atomic styles are now always applied.

    The data-checked, data-disabled, and data-size attributes have been removed from the Toggle component's rendered output.

Patch Changes

  • Updated dependencies

15.6.2

Patch Changes

  • Updated dependencies

15.6.1

Patch Changes

  • 65ac96a771383, (opens new window) - Fix disabled toggle handle zIndex rendering above overlapping elements like select menus, behind feature flag platform-toggle-fix-disabled-zindex

15.6.0

Minor Changes

Patch Changes

  • Updated dependencies

15.5.1

Patch Changes

  • Updated dependencies

15.5.0

Minor Changes

  • 2fda175ca9266, (opens new window) - Removed data-checked, data-disabled, and data-size attributes from the Toggle component's rendered output. These attributes are no longer set on the label element when the platform-toggle-atomic-styles feature flag is enabled.

15.4.1

Patch Changes

  • Updated dependencies

15.4.0

Minor Changes

  • bc599e912cf4b, (opens new window) - Removed data-checked, data-disabled, and data-size attributes from the Toggle component's rendered output. These attributes are no longer set on the label element when the platform-toggle-atomic-styles feature flag is enabled.

15.3.0

Minor Changes

  • 2fe4c35fe7ad6, (opens new window) - Internal refactor to toggle to eliminate nested CSS selectors in favor of an atomic-friendly styling approach using CSS custom properties. This change is behind the platform-toggle-atomic-styles feature gate.

15.2.17

Patch Changes

15.2.16

Patch Changes

15.2.15

Patch Changes

15.2.14

Patch Changes

  • Updated dependencies

15.2.13

Patch Changes

  • Updated dependencies

15.2.12

Patch Changes

  • Updated dependencies

15.2.11

Patch Changes

  • Updated dependencies

15.2.10

Patch Changes

  • Updated dependencies

15.2.9

Patch Changes

  • Updated dependencies

15.2.8

Patch Changes

  • Updated dependencies

15.2.7

Patch Changes

15.2.6

Patch Changes

  • Updated dependencies

15.2.5

Patch Changes

15.2.4

Patch Changes

15.2.3

Patch Changes

  • Updated dependencies

15.2.2

Patch Changes

15.2.1

Patch Changes

  • Updated dependencies

15.2.0

Minor Changes

15.1.16

Patch Changes

15.1.15

Patch Changes

  • Updated dependencies

15.1.14

Patch Changes

  • Updated dependencies

15.1.13

Patch Changes

  • Updated dependencies

15.1.12

Patch Changes

  • Updated dependencies

15.1.11

Patch Changes

  • Updated dependencies

15.1.10

Patch Changes

  • Updated dependencies

15.1.9

Patch Changes

  • Updated dependencies

15.1.8

Patch Changes

15.1.7

Patch Changes

15.1.6

Patch Changes

  • Updated dependencies

15.1.5

Patch Changes

  • Updated dependencies

15.1.4

Patch Changes

15.1.3

Patch Changes

  • Updated dependencies

15.1.2

Patch Changes

  • Updated dependencies

15.1.1

Patch Changes

  • Updated dependencies

15.1.0

Minor Changes

Patch Changes

  • Updated dependencies

15.0.13

Patch Changes

  • Updated dependencies

15.0.12

Patch Changes

15.0.11

Patch Changes

15.0.10

Patch Changes

  • Updated dependencies

15.0.9

Patch Changes

  • Updated dependencies

15.0.8

Patch Changes

  • Updated dependencies

15.0.7

Patch Changes

  • Updated dependencies

15.0.6

Patch Changes

  • Updated dependencies

15.0.5

Patch Changes

  • Updated dependencies

15.0.4

Patch Changes

15.0.3

Patch Changes

15.0.2

Patch Changes

  • Updated dependencies

15.0.1

Patch Changes

  • Updated dependencies

15.0.0

Major Changes

Patch Changes

  • Updated dependencies

14.2.0

Minor Changes

Patch Changes

  • Updated dependencies

14.1.3

Patch Changes

  • Updated dependencies

14.1.2

Patch Changes

  • Updated dependencies

14.1.1

Patch Changes

  • Updated dependencies

14.1.0

Minor Changes

Patch Changes

  • Updated dependencies

14.0.3

Patch Changes

14.0.2

Patch Changes

  • Updated dependencies

14.0.1

Patch Changes

14.0.0

Major Changes

  • #174218, (opens new window) 37630216e4b54, (opens new window) - Migrated from @emotion/react to @compiled/react in order to improve performance, align with the rest of the Atlaskit techstack, and support React 18 Streaming SSR.

    Please note, in order to use this version of @atlaskit/toggle, you will need to ensure that your bundler is configured to handle .css imports correctly. Most bundlers come with built-in support for .css imports, so you may not need to do anything. If you are using a different bundler, please refer to the documentation for that bundler to understand how to handle .css imports.

    For more information on the migration, please refer to RFC-73 Migrating our components to Compiled CSS-in-JS, (opens new window).

13.4.10

Patch Changes

13.4.9

Patch Changes

  • Updated dependencies

13.4.8

Patch Changes

13.4.7

Patch Changes

  • Updated dependencies

13.4.6

Patch Changes

  • Updated dependencies

13.4.5

Patch Changes

  • Updated dependencies

13.4.4

Patch Changes

13.4.3

Patch Changes

13.4.2

Patch Changes

  • Updated dependencies

13.4.1

Patch Changes

13.4.0

Minor Changes

Patch Changes

  • Updated dependencies

13.3.1

Patch Changes

  • Updated dependencies

13.3.0

Minor Changes

  • #127511, (opens new window) db30e29344013, (opens new window) - Widening range of react and react-dom peer dependencies from ^16.8.0 || ^17.0.0 || ~18.2.0 to the wider range of ``^16.8.0 || ^17.0.0 || ^18.0.0` (where applicable).

    This change has been done to enable usage of react@18.3 as well as to have a consistent peer dependency range for react and react-dom for /platform packages.

Patch Changes

  • Updated dependencies

13.2.1

Patch Changes

  • Updated dependencies

13.2.0

Minor Changes

Patch Changes

  • Updated dependencies

13.1.0

Minor Changes

13.0.5

Patch Changes

13.0.4

Patch Changes

13.0.3

Patch Changes

13.0.2

Patch Changes

13.0.1

Patch Changes

  • Updated dependencies

13.0.0

Major Changes

12.6.11

Patch Changes

12.6.10

Patch Changes

12.6.9

Patch Changes

12.6.8

Patch Changes

12.6.7

Patch Changes

12.6.6

Patch Changes

12.6.5

Patch Changes

12.6.4

Patch Changes

12.6.3

Patch Changes

12.6.2

Patch Changes

12.6.1

Patch Changes

12.6.0

Minor Changes

Patch Changes

  • Updated dependencies

12.5.8

Patch Changes

  • Updated dependencies

12.5.7

Patch Changes

  • Updated dependencies

12.5.6

Patch Changes

  • Updated dependencies

12.5.5

Patch Changes

  • Updated dependencies

12.5.4

Patch Changes

12.5.3

Patch Changes

  • Updated dependencies

12.5.2

Patch Changes

12.5.1

Patch Changes

12.5.0

Minor Changes

Patch Changes

  • Updated dependencies

12.4.10

Patch Changes

12.4.9

Patch Changes

12.4.8

Patch Changes

  • Updated dependencies

12.4.7

Patch Changes

12.4.6

Patch Changes

  • Updated dependencies

12.4.5

Patch Changes

  • Updated dependencies

12.4.4

Patch Changes

  • Updated dependencies

12.4.3

Patch Changes

12.4.2

Patch Changes

  • 19d72473dfb, (opens new window) - The no-unsafe-design-token-usage eslint rule now respects the new token naming conventions when auto-fixing by correctly formatting token ids.
  • Updated dependencies

12.4.1

Patch Changes

  • Updated dependencies

12.4.0

Minor Changes

  • #17576, (opens new window) 5f184bb7147, (opens new window) - Note: It is a re-release of the wrongly patched version 11.4.1 that should have been a minor release.

    [ux] Instrumented toggle with the new theming package, @atlaskit/tokens.

    New tokens will be visible only in applications configured to use the new Tokens API (currently in alpha). These changes are intended to be interoperable with the legacy theme implementation.Legacy dark mode users should expect no visual or breaking changes.

Patch Changes

  • Updated dependencies

12.3.1

Minor Changes

WRONG RELEASE TYPE - DON'T USE

  • #15998, (opens new window) fa8d020232e, (opens new window) - [ux] Instrumented toggle with the new theming package, @atlaskit/tokens.

    New tokens will be visible only in applications configured to use the new Tokens API (currently in alpha). These changes are intended to be interoperable with the legacy theme implementation. Legacy dark mode users should expect no visual or breaking changes.

Patch Changes

  • Updated dependencies

12.3.0

Minor Changes

Patch Changes

  • Updated dependencies

12.2.2

Patch Changes

12.2.1

Patch Changes

12.2.0

Minor Changes

12.1.0

Minor Changes

Patch Changes

  • Updated dependencies

12.0.5

Patch Changes

12.0.4

Patch Changes

12.0.3

Patch Changes

12.0.2

Patch Changes

12.0.1

Patch Changes

12.0.0

Major Changes

  • #5860, (opens new window) da6f3ca7ff, (opens new window) - ### Brief

    The ultimate goal of this major for toggle is to improve the component's performance, by both reducing static structure or avoiding unnecessary function calls.

    Some big changes are made as following:

    • merged stateful and stateless component
    • replace styled-components to emotion as styling library
    • restructure DOM element to reduce size
    • using latest analytics-next

    Stateful vs Stateless

    We've merged Toggle and ToggleStateless in this major, internally we distinguish those two different behaviours by props a user passed in. In React documents, it's recommended to use controlled components to implement forms here, (opens new window), while there are cases you might need a different approach instead, there is a detailed discussion, (opens new window) here that can help you to decide which way to go.

    When defaultChecked is passed in, that means you want it to be stateful and the component will have a state reflecting checked or unchecked all by itself. In contrast, if defaultChecked is absent, it turns to a stateless component and you have to control it on you own, by using isChecked prop.

    When both are provided, it will always be a stateful component.

    Upgrading with codemod

    # You first need to have the latest toggle installed before you can run the codemod yarn upgrade @atlaskit/toggle@^12.0.0 # Run the codemod cli # Pass in a parser for your codebase npx @atlaskit/codemod-cli /path/to/target/directory --parser [tsx | flow | babel]

11.0.3

Patch Changes

11.0.2

Patch Changes

  • Updated dependencies

11.0.1

Patch Changes

11.0.0

Major Changes

Patch Changes

  • Updated dependencies

10.0.4

Patch Changes

10.0.3

Patch Changes

10.0.2

Patch Changes

10.0.1

Patch Changes

10.0.0

Major Changes

Patch Changes

  • Updated dependencies

9.0.0

Major Changes

  • #2763, (opens new window) 74b9e80533, (opens new window) - BREAKING - The label prop has been removed. If wanting to pair your toggle with a label element make sure to use the freshly introduced id prop!

    Before:

    <Toggle label="Allow pull requests" />

    After (we use Emotion here - but you can use any equivalent library):

/** * @jsxRuntime classic * @jsx jsx */ import { jsx } from '@emotion/core'; import { visuallyHidden } from '@atlaskit/theme/constants'; <label css={visuallyHidden()} htmlFor="my-toggle">Allow pull requests</label> <Toggle id="my-toggle" />

This now also allows you to visually show a label (just omit the visually hidden mixin) - which for the most part you'll want to do. Read the design docs, (opens new window) for more inspiration.

Happy toggling!

Minor Changes

import Toggle from '@atlaskit/toggle'; <label htmlFor="my-toggle">Do the thing</label> <Toggle id="my-toggle" />

8.1.9

Patch Changes

8.1.8

Patch Changes

  • Updated dependencies

8.1.7

Patch Changes

8.1.6

Patch Changes

8.1.5

Patch Changes

8.1.4

Patch Changes

8.1.3

Patch Changes

8.1.2

Patch Changes

8.1.1

Patch Changes

8.1.0

Minor Changes

  • [minor]decb366d7a, (opens new window):

    Adding an optional prop testId that will set the attribute value data-testid. It will help products to write better integration and end to end tests.

8.0.5

Patch Changes

  • [patch]097b696613, (opens new window):

    Components now depend on TS 3.6 internally, in order to fix an issue with TS resolving non-relative imports as relative imports

8.0.4

Patch Changes

8.0.3

Patch Changes

8.0.2

Patch Changes

8.0.1

Patch Changes

  • [patch]926b43142b, (opens new window):

    Analytics-next has been converted to Typescript. Typescript consumers will now get static type safety. Flow types are no longer provided. No behavioural changes.

    Breaking changes

    • withAnalyticsForSumTypeProps alias has been removed, please use withAnalyticsEvents
    • AnalyticsContextWrappedComp alias has been removed, please use withAnalyticsContext

    Breaking changes to TypeScript annotations

    • withAnalyticsEvents now infers proptypes automatically, consumers no longer need to provide props as a generic type.
    • withAnalyticsContext now infers proptypes automatically, consumers no longer need to provide props as a generic type.
    • Type WithAnalyticsEventProps has been renamed to WithAnalyticsEventsProps to match source code
    • Type CreateUIAnalyticsEventSignature has been renamed to CreateUIAnalyticsEvent to match source code
    • Type UIAnalyticsEventHandlerSignature has been renamed to UIAnalyticsEventHandler to match source code
    • Type AnalyticsEventsPayload has been renamed to AnalyticsEventPayload
    • Type ObjectType has been removed, please use Record<string, any> or [key: string]: any
    • Type UIAnalyticsEventInterface has been removed, please use UIAnalyticsEvent
    • Type AnalyticsEventInterface has been removed, please use AnalyticsEvent
    • Type CreateAndFireEventFunction removed and should now be inferred by TypeScript
    • Type AnalyticsEventUpdater removed and should now be inferred by TypeScript

8.0.0

Major Changes

  • [major]7e9d653278, (opens new window):

    Toggle has been converted to Typescript. Typescript consumers will now get static type safety. Flow types are no longer provided. No API or behavioural changes.

7.0.4

Patch Changes

7.0.3

7.0.2

Patch Changes

7.0.1

7.0.0

  • [major]7c17b35107, (opens new window):
    • Updates react and react-dom peer dependencies to react@^16.8.0 and react-dom@^16.8.0. To use this package, please ensure you use at least this version of react and react-dom.

6.0.4

6.0.3

  • Updated dependencies 1e826b2966, (opens new window):
    • @atlaskit/docs@7.0.2
    • @atlaskit/analytics-next@4.0.3
    • @atlaskit/icon@16.0.8
    • @atlaskit/theme@8.1.6
    • @atlaskit/button@12.0.0

6.0.2

6.0.1

  • Updated dependencies 9d5cc39394, (opens new window):
    • @atlaskit/docs@7.0.1
    • @atlaskit/analytics-next@4.0.1
    • @atlaskit/icon@16.0.5
    • @atlaskit/theme@8.0.1
    • @atlaskit/button@11.0.0

6.0.0

  • [major]76299208e6, (opens new window):

    • Drop ES5 from all the flow modules

    Dropping CJS support in all @atlaskit packages

    As a breaking change, all @atlaskit packages will be dropping cjs distributions and will only distribute esm. This means all distributed code will be transpiled, but will still contain import and export declarations.

    The major reason for doing this is to allow us to support multiple entry points in packages, e.g:

    import colors from `@atlaskit/theme/colors`;

    Previously this was sort of possible for consumers by doing something like:

    import colors from `@atlaskit/theme/dist/esm/colors`;

    This has a couple of issues. 1, it treats the file system as API making internal refactors harder, we have to worry about how consumers might be using things that aren't actually supposed to be used. 2. We are unable to do this internally in @atlaskit packages. This leads to lots of packages bundling all of theme, just to use a single color, especially in situations where tree shaking fails.

    To support being able to use multiple entrypoints internally, we unfortunately cannot have multiple distributions as they would need to have very different imports from of their own internal dependencies.

    ES Modules are widely supported by all modern bundlers and can be worked around in node environments.

    We may choose to revisit this solution in the future if we find any unintended condequences, but we see this as a pretty sane path forward which should lead to some major bundle size decreases, saner API's and simpler package architecture.

    Please reach out to #fabric-build (if in Atlassian) or create an issue in Design System Support, (opens new window) (for external) if you have any questions or queries about this.

5.0.15

5.0.14

  • Updated dependencies 58b84fa, (opens new window):
    • @atlaskit/analytics-next@3.1.2
    • @atlaskit/button@10.1.1
    • @atlaskit/icon@15.0.2
    • @atlaskit/theme@7.0.1
    • @atlaskit/docs@6.0.0

5.0.13

5.0.12

5.0.11

  • Updated dependencies 6998f11, (opens new window):
    • @atlaskit/docs@5.2.1
    • @atlaskit/analytics-next@3.1.1
    • @atlaskit/icon@14.6.1
    • @atlaskit/theme@6.2.1
    • @atlaskit/button@10.0.0

5.0.10

5.0.9

5.0.8

5.0.6

5.0.5

5.0.4

  • [patch] Updated dependencies acd86a1, (opens new window)
    • @atlaskit/icon@13.2.2
    • @atlaskit/button@9.0.4
    • @atlaskit/theme@5.1.2
    • @atlaskit/analytics-next@3.0.3
    • @atlaskit/docs@5.0.2

5.0.3

5.0.2

5.0.1

5.0.0

4.0.3

4.0.2

4.0.1

4.0.0

3.0.2

3.0.0

2.9.1

2.9.0

2.8.4

2.8.3

2.8.2

2.8.1

2.8.0

2.7.1

2.7.0

2.6.4 (2017-11-17)

2.6.3 (2017-10-26)

2.6.2 (2017-10-22)

2.6.1 (2017-09-28)

2.6.0 (2017-09-18)

2.5.0 (2017-09-13)

2.4.3 (2017-08-11)

2.4.2 (2017-07-27)

2.4.1 (2017-07-25)

2.1.0 (2017-07-17)

2.0.5 (2017-07-13)

2.0.4 (2017-05-18)

2.0.3 (2017-04-27)

2.0.2 (2017-04-26)

2.0.1 (2017-04-11)

2.0.0 (2017-04-03)

  • fix; refactor the toggle component to use styled-components (c735164, (opens new window))
  • breaking; added peerDependency "styled-components”, removed dependency “classnames”
  • ISSUES CLOSED: AK-2004

1.0.6 (2017-03-23)

1.0.4 (2017-03-21)

1.0.3 (2017-02-16)

1.0.2 (2017-02-09)

1.0.1 (2017-02-07)

Was this page helpful?
We use this feedback to improve our documentation.
© 2026 AtlassianTrademark, (opens new window)Privacy, (opens new window)License