Radio

A radio input allows users to select only one option from a number of choices. Radio is generally displayed in a radio group.

Neutral selected states

When the platform-dst-tokens-finesse feature flag is enabled, this component uses the new neutral treatment for selected states.

10.2.4

Patch Changes

  • Updated dependencies

10.2.3

Patch Changes

  • Updated dependencies

10.2.2

Patch Changes

  • Updated dependencies

10.2.1

Patch Changes

  • Updated dependencies

10.2.0

Minor Changes

  • bd2c5b0112185, (opens new window) - Remove stale API report artifacts from published Platform packages.

Patch Changes

  • Updated dependencies

10.1.1

Patch Changes

10.1.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

10.0.1

Patch Changes

  • Updated dependencies

10.0.0

Major Changes

  • f0bf5f838abd5, (opens new window) - Apply Volt entry-point and barrel-removal standards across these packages. Public exports now resolve directly to ./src/* implementations instead of intermediate ./src/entry-points/* re-exports.

    Migration

    Prefer published subpaths over the package root or internal entry-point paths:

    import Calendar from '@atlaskit/calendar/calendar'; import Drawer from '@atlaskit/drawer/drawer'; import { WidthObserver } from '@atlaskit/width-detector/width-observer'; import { DocumentViewer } from '@atlaskit/media-document-viewer/document-viewer';

    If you imported through internal entry-point modules, switch to the public subpath:

    -import Calendar from '@atlaskit/calendar/entry-points/calendar'; +import Calendar from '@atlaskit/calendar/calendar'; -import WidthObserver from '@atlaskit/width-detector/src/WidthObserver'; +import { WidthObserver } from '@atlaskit/width-detector/width-observer';

Patch Changes

  • Updated dependencies

9.1.2

Patch Changes

  • Updated dependencies

9.1.1

Patch Changes

  • Updated dependencies

9.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

9.0.1

Patch Changes

9.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

8.6.2

Patch Changes

  • Updated dependencies

8.6.1

Patch Changes

  • Updated dependencies

8.6.0

Minor Changes

8.5.4

Patch Changes

  • Updated dependencies

8.5.3

Patch Changes

8.5.2

Patch Changes

  • Updated dependencies

8.5.1

Patch Changes

  • Updated dependencies

8.5.0

Minor Changes

  • e1feac98875c6, (opens new window) - Internal only CSS refactor to eliminate nested CSS selectors in favor of an atomic-friendly styling approach. This change was previously behind the platform-radio-atomic-styles feature gate, which has now been removed.

Patch Changes

8.4.7

Patch Changes

8.4.6

Patch Changes

8.4.5

Patch Changes

  • Updated dependencies

8.4.4

Patch Changes

  • Updated dependencies

8.4.3

Patch Changes

  • d2af0dc3a08f3, (opens new window) - Internal only CSS refactor to eliminate nested CSS selectors in favor of an atomic-friendly styling approach. This change is behind the platform-radio-atomic-styles feature gate.
  • Updated dependencies

8.4.2

Patch Changes

  • Updated dependencies

8.4.1

Patch Changes

  • Updated dependencies

8.4.0

Minor Changes

8.3.16

Patch Changes

  • Updated dependencies

8.3.15

Patch Changes

  • Updated dependencies

8.3.14

Patch Changes

8.3.13

Patch Changes

  • Updated dependencies

8.3.12

Patch Changes

  • Updated dependencies

8.3.11

Patch Changes

  • Updated dependencies

8.3.10

Patch Changes

  • Updated dependencies

8.3.9

Patch Changes

  • Updated dependencies

8.3.8

Patch Changes

8.3.7

Patch Changes

8.3.6

Patch Changes

8.3.5

Patch Changes

8.3.4

Patch Changes

8.3.3

Patch Changes

  • Updated dependencies

8.3.2

Patch Changes

  • Updated dependencies

8.3.1

Patch Changes

8.3.0

Minor Changes

8.2.1

Patch Changes

  • Updated dependencies

8.2.0

Minor Changes

8.1.8

Patch Changes

  • Updated dependencies

8.1.7

Patch Changes

  • Updated dependencies

8.1.6

Patch Changes

8.1.5

Patch Changes

8.1.4

Patch Changes

  • Updated dependencies

8.1.3

Patch Changes

  • Updated dependencies

8.1.2

Patch Changes

  • Updated dependencies

8.1.1

Patch Changes

  • Updated dependencies

8.1.0

Minor Changes

Patch Changes

  • Updated dependencies

8.0.3

Patch Changes

8.0.2

Patch Changes

  • Updated dependencies

8.0.1

Patch Changes

8.0.0

Major Changes

Patch Changes

  • Updated dependencies

7.3.0

Minor Changes

Patch Changes

  • Updated dependencies

7.2.3

Patch Changes

  • Updated dependencies

7.2.2

Patch Changes

  • Updated dependencies

7.2.1

Patch Changes

  • Updated dependencies

7.2.0

Minor Changes

Patch Changes

  • Updated dependencies

7.1.0

Minor Changes

7.0.1

Patch Changes

  • Updated dependencies

7.0.0

Major Changes

  • #177175, (opens new window) 188698fbad962, (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/radio, 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).

6.6.0

Minor Changes

6.5.5

Patch Changes

6.5.4

Patch Changes

  • Updated dependencies

6.5.3

Patch Changes

  • Updated dependencies

6.5.2

Patch Changes

  • Updated dependencies

6.5.1

Patch Changes

  • Updated dependencies

6.5.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

6.4.1

Patch Changes

  • Updated dependencies

6.4.0

Minor Changes

6.3.0

Minor Changes

Patch Changes

  • Updated dependencies

6.2.0

Minor Changes

6.1.3

Patch Changes

6.1.2

Patch Changes

6.1.1

Patch Changes

6.1.0

Minor Changes

Patch Changes

  • Updated dependencies

6.0.3

Patch Changes

6.0.2

Patch Changes

6.0.1

Patch Changes

6.0.0

Major Changes

5.6.10

Patch Changes

5.6.9

Patch Changes

5.6.8

Patch Changes

5.6.7

Patch Changes

5.6.6

Patch Changes

5.6.5

Patch Changes

5.6.4

Patch Changes

5.6.3

Patch Changes

5.6.2

Patch Changes

5.6.1

Patch Changes

5.6.0

Minor Changes

5.5.2

Patch Changes

5.5.1

Patch Changes

5.5.0

Minor Changes

Patch Changes

  • Updated dependencies

5.4.9

Patch Changes

  • Updated dependencies

5.4.8

Patch Changes

  • Updated dependencies

5.4.7

Patch Changes

5.4.6

Patch Changes

5.4.5

Patch Changes

  • Updated dependencies

5.4.4

Patch Changes

  • Updated dependencies

5.4.3

Patch Changes

  • Updated dependencies

5.4.2

Patch Changes

5.4.1

Patch Changes

5.4.0

Minor Changes

Patch Changes

  • Updated dependencies

5.3.13

Patch Changes

5.3.12

Patch Changes

5.3.11

Patch Changes

  • Updated dependencies

5.3.10

Patch Changes

5.3.9

Patch Changes

  • Updated dependencies

5.3.8

Patch Changes

  • Updated dependencies

5.3.7

Patch Changes

  • Updated dependencies

5.3.6

Patch Changes

5.3.5

Patch Changes

  • Updated dependencies

5.3.4

Patch Changes

5.3.3

Patch Changes

  • Updated dependencies

5.3.2

Patch Changes

  • Updated dependencies

5.3.1

Patch Changes

  • Updated dependencies

5.3.0

Minor Changes

  • #13302, (opens new window) f276913fa2c, (opens new window) - Instrumented Radio 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

5.2.1

Patch Changes

5.2.0

Minor Changes

5.1.1

Patch Changes

5.1.0

Minor Changes

5.0.4

Patch Changes

5.0.3

Patch Changes

5.0.2

Patch Changes

5.0.1

Patch Changes

  • Updated dependencies

5.0.0

Major Changes

  • #4749, (opens new window) 44ef6437cd, (opens new window) - In this version, we made radio dramatically faster and lighter 😍

    Changes

    In 5.0.0 we improved the performance of radio by making it more similar to a native radio input.

    • Previously we rendered a hidden input and an svg for the radio icon. This way we could get all the accessibility benefits of using a native radio input while being able to style the svg. We now use appearance: none on the input, enabling us to style the input and the after pseudo-element. This removes the need for an svg.
    • Previously all interaction styles were generated in JS using events, causing unnecessary and slow rerenders. Now all styles for the radio are applied using css selectors.
    • Because the input is now visible, we have changed the test id from ${testId}--hidden-radio to ${testId}--radio-input to provide less usage friction. We looked into product usage of the testId and we have reached out to the owners of any code that would be effected (there was only one).
    • Dropped the peerDependency on styled-components@3 in favour of using @emotion/core.
    • Converted to function components.
    • Added the ability to forward a ref to a radio input.
    • Remove the RadioIcon export, you should just use the Radio without a label if you want this functionality.
    • Restricted types for Radio and RadioGroup. RadioGroup previously allowed you to pass any props so this has been restricted to only those used. The isChecked prop in theoptions prop for RadioGroup has been removed. You can only set a Radio as checked if the value of the Radio is the selected value in the RadioGroup. Radio used to explicitly define input attributes as props and now it extends InputHTMLAttributes allowing you to pass any input attribute as a prop.
    • There was a bug where all onMouse events were passed onto both the input element and the Radio, which means they would be called multiple times. Now they are only passed to the input element.
    • As Radio acts as a native radio input, the name prop on each RadioGroup needs to be unique or each RadioGroup with the same name needs to be inside a form element. This is because the name attribute on radio inputs is used to link the inputs so if you have two separate RadioGroup's with the same name, the browser views them as one radio group.

Patch Changes

  • Updated dependencies

4.0.6

Patch Changes

4.0.5

Patch Changes

4.0.4

Patch Changes

4.0.3

Patch Changes

4.0.2

Patch Changes

4.0.1

Patch Changes

4.0.0

Major Changes

Patch Changes

  • Updated dependencies

3.2.3

Patch Changes

3.2.2

Patch Changes

  • Updated dependencies

3.2.1

Patch Changes

3.2.0

Minor Changes

Patch Changes

3.1.11

Patch Changes

3.1.10

Patch Changes

3.1.9

Patch Changes

  • [patch]6548261c9a, (opens new window):

    Remove namespace imports from React, ReactDom, and PropTypes- Updated dependencies 6548261c9a, (opens new window):

    • @atlaskit/docs@8.3.2
    • @atlaskit/visual-regression@0.1.9
    • @atlaskit/analytics-next@6.3.5
    • @atlaskit/button@13.3.7
    • @atlaskit/checkbox@10.1.7
    • @atlaskit/form@7.1.2
    • @atlaskit/icon@20.0.1
    • @atlaskit/theme@9.5.1

3.1.8

Patch Changes

  • Updated dependencies c0102a3ea2, (opens new window):
    • @atlaskit/icon@20.0.0
    • @atlaskit/form@7.1.1
    • @atlaskit/docs@8.3.1
    • @atlaskit/button@13.3.6
    • @atlaskit/checkbox@10.1.6

3.1.7

Patch Changes

3.1.6

Patch Changes

3.1.5

Patch Changes

3.1.4

Patch Changes

  • [patch]d222c2b987, (opens new window):

    Theme has been converted to Typescript. Typescript consumers will now get static type safety. Flow types are no longer provided.

    Breaking

    ** getTokens props changes ** When defining the value function passed into a ThemeProvider, the getTokens parameter cannot be called without props; if no props are provided an empty object {} must be passed in:

    <CustomTheme.Provider value={t => ({ ...t(), backgroundColor: '#333'})} >

    becomes:

    <CustomTheme.Provider value={t => ({ ...t({}), backgroundColor: '#333'})} >

    ** Color palette changes ** Color palettes have been moved into their own file. Users will need to update imports from this:

    import { colors } from '@atlaskit/theme'; colors.colorPalette('8');

    to this:

    import { colorPalette } from '@atlaskit/theme'; colorPalette.colorPalette('8');

    or for multi entry-point users:

    import * as colors from '@atlaskit/theme/colors'; colors.colorPalette('8');

    to this:

    import * as colorPalettes from '@atlaskit/theme/color-palette'; colorPalettes.colorPalette('8');

3.1.3

Patch Changes

3.1.2

Patch Changes

3.1.1

Patch Changes

3.1.0

Minor Changes

  • [minor]ff521a0e20, (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.

3.0.18

3.0.17

Patch Changes

3.0.16

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

3.0.15

Patch Changes

3.0.14

Patch Changes

3.0.13

Patch Changes

3.0.12

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

3.0.11

Patch Changes

3.0.10

Patch Changes

3.0.9

Patch Changes

3.0.8

Patch Changes

  • [patch]d0db01b410, (opens new window):

    TypeScript users of withAnalyticsEvents and withAnalyticsContext are now required to provide props as a generic type. This is so that TypeScript can correctly calculate the props and defaultProps of the returned component.

    Before:

    withAnalyticsEvents()(Button) as ComponentClass<Props>;

    After:

    withAnalyticsEvents<Props>()(Button);

3.0.7

3.0.6

  • Updated dependencies 06326ef3f7, (opens new window):
    • @atlaskit/docs@8.1.3
    • @atlaskit/button@13.0.9
    • @atlaskit/checkbox@8.0.5
    • @atlaskit/form@6.1.1
    • @atlaskit/icon@19.0.0

3.0.5

Patch Changes

3.0.4

Patch Changes

3.0.3

  • Updated dependencies cfc3c8adb3, (opens new window):
    • @atlaskit/docs@8.1.2
    • @atlaskit/button@13.0.8
    • @atlaskit/checkbox@8.0.2
    • @atlaskit/form@6.0.5
    • @atlaskit/icon@18.0.0

3.0.2

  • Updated dependencies 70862830d6, (opens new window):
    • @atlaskit/button@13.0.6
    • @atlaskit/form@6.0.4
    • @atlaskit/checkbox@8.0.0
    • @atlaskit/icon@17.2.0
    • @atlaskit/theme@9.1.0

3.0.1

  • [patch]b0ef06c685, (opens new window):
    • This is just a safety release in case anything strange happened in in the previous one. See Pull Request #5942 for details

3.0.0

  • [major]1da5351f72, (opens new window):
    • @atlaskit/radio has been converted to Typescript. Typescript consumers will now get static type safety. Flow types are no longer provided. No API or behavioural changes.

2.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.

1.0.0

0.5.3

  • Updated dependencies 9c0b4744be, (opens new window):
    • @atlaskit/docs@7.0.3
    • @atlaskit/button@12.0.3
    • @atlaskit/checkbox@6.0.4
    • @atlaskit/form@5.2.7
    • @atlaskit/icon@16.0.9
    • @atlaskit/section-message@2.0.3
    • @atlaskit/theme@8.1.7

0.5.2

  • Updated dependencies 1e826b2966, (opens new window):
    • @atlaskit/docs@7.0.2
    • @atlaskit/analytics-next@4.0.3
    • @atlaskit/checkbox@6.0.3
    • @atlaskit/form@5.2.5
    • @atlaskit/icon@16.0.8
    • @atlaskit/section-message@2.0.2
    • @atlaskit/theme@8.1.6
    • @atlaskit/button@12.0.0

0.5.1

  • Updated dependencies 9d5cc39394, (opens new window):
    • @atlaskit/docs@7.0.1
    • @atlaskit/analytics-next@4.0.1
    • @atlaskit/checkbox@6.0.1
    • @atlaskit/form@5.2.1
    • @atlaskit/icon@16.0.5
    • @atlaskit/section-message@2.0.1
    • @atlaskit/theme@8.0.1
    • @atlaskit/button@11.0.0

0.5.0

  • [minor]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.

0.4.7

0.4.6

  • Updated dependencies d7ef59d432, (opens new window):
    • @atlaskit/docs@6.0.1
    • @atlaskit/button@10.1.2
    • @atlaskit/checkbox@5.0.11
    • @atlaskit/form@5.1.2
    • @atlaskit/section-message@1.0.16
    • @atlaskit/icon@16.0.0

0.4.5

0.4.4

  • Updated dependencies 58b84fa, (opens new window):
    • @atlaskit/analytics-next@3.1.2
    • @atlaskit/button@10.1.1
    • @atlaskit/checkbox@5.0.9
    • @atlaskit/form@4.0.21
    • @atlaskit/icon@15.0.2
    • @atlaskit/section-message@1.0.14
    • @atlaskit/theme@7.0.1
    • @atlaskit/docs@6.0.0

0.4.3

  • Updated dependencies d13242d, (opens new window):
    • @atlaskit/docs@5.2.3
    • @atlaskit/button@10.0.4
    • @atlaskit/field-base@11.0.12
    • @atlaskit/form@4.0.20
    • @atlaskit/icon@15.0.1
    • @atlaskit/section-message@1.0.13
    • @atlaskit/theme@7.0.0

0.4.2

  • Updated dependencies ab9b69c, (opens new window):
    • @atlaskit/docs@5.2.2
    • @atlaskit/button@10.0.1
    • @atlaskit/field-base@11.0.11
    • @atlaskit/form@4.0.19
    • @atlaskit/section-message@1.0.12
    • @atlaskit/icon@15.0.0

0.4.1

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

0.4.0

  • [minor]b42680b, (opens new window):
    • Add isDisabled prop to RadioGroup, once set will set the isDisabled value for all Radio elements within the group

0.3.0

  • [minor]8199088, (opens new window):
    • BREAKING: defaultCheckedValue and checkedValue props in the RadioGroup component now changed to defaultValue and value respectively

0.2.4

0.2.3

  • [patch] Updated dependencies 65c6514, (opens new window)
    • @atlaskit/docs@5.0.8
    • @atlaskit/button@9.0.13
    • @atlaskit/field-base@11.0.8
    • @atlaskit/form@4.0.10
    • @atlaskit/section-message@1.0.8
    • @atlaskit/icon@14.0.0

0.2.2

0.2.1

0.2.0

  • [minor] Removed radioInput component, replaced Radio children prop with optional label prop to enable the use case facilitated by RadioInput. Added aria-label prop to Radio for accessibility. Wrapped Radio component in Analytics. 866a29b, (opens new window)

0.1.0

0.0.3

0.0.1

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