Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

@atlaskit/radio

atlassian99.9kApache-2.08.3.16TypeScript support: included

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

atlaskit, react, ui

readme

Radio

A radio input is used to present a single option from a list. Use radio group for multiple options.

Installation

yarn add @atlaskit/radio

Usage

Detailed docs and example usage can be found here.

changelog

@atlaskit/radio

8.3.16

Patch Changes

  • Updated dependencies

8.3.15

Patch Changes

  • Updated dependencies

8.3.14

Patch Changes

  • a60a82196851a - Internal refactors to remove unused variables. No functional or public changes.
  • Updated dependencies

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

  • 437668dfbdec9 - Add explicit types to a number of DST components
  • Updated dependencies

8.3.7

Patch Changes

8.3.6

Patch Changes

  • 39e543109ec09 - add type info to forwardRef components
  • Updated dependencies

8.3.5

Patch Changes

  • f0662cd7a143e - Internal changes to how borders are applied.
  • Updated dependencies

8.3.4

Patch Changes

  • 20056074447a2 - Switch to more semantically accurate label prop in internal radio and radio group instances.

8.3.3

Patch Changes

  • Updated dependencies

8.3.2

Patch Changes

  • Updated dependencies

8.3.1

Patch Changes

  • 255837cfba315 - Internal changes to how border radius is applied.
  • Updated dependencies

8.3.0

Minor Changes

8.2.1

Patch Changes

  • Updated dependencies

8.2.0

Minor Changes

  • 8f13376aa76a6 - Add labelId prop to allow referencing of external elements for the accessible name.

8.1.8

Patch Changes

  • Updated dependencies

8.1.7

Patch Changes

  • Updated dependencies

8.1.6

Patch Changes

  • #188571 aa2315ba7c52e - [ux] Adds css rule to style radio as disabled when it is both disabled and checked

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

  • #129972 b2d69a39e6687 - Update @compiled/react dependency for improved type checking support.
  • Updated dependencies

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 188698fbad962 - 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.

6.6.0

Minor Changes

6.5.5

Patch Changes

  • #165531 57f451bda8919 - Adds side-effect config to support Compiled css extraction in third-party apps

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 db30e29344013 - 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.3as well as to have a consistent peer dependency range forreactandreact-domfor/platform` packages.

Patch Changes

  • Updated dependencies

6.4.1

Patch Changes

  • Updated dependencies

6.4.0

Minor Changes

  • #110836 a8bd419fd70b9 - Explicitly set jsxRuntime to classic via pragma comments in order to avoid issues where jsxRuntime is implicitly set to automatic.

6.3.0

Minor Changes

  • #94675 5d9e1dccacca - [ux] Update input border color token to meet 3:1 color contrast ratioLight theme: color.border.input: #091E4224 → #8590A2Dark mode: color.border.input: #A6C5E229 → #738496

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

  • #80805 427c2dd9e0d6 - [ux] update border with from 2px to 1px with darker color to meet 3:1 color contrast for accessibility improvement

Patch Changes

  • Updated dependencies

6.0.3

Patch Changes

  • #78598 cabae83473c3 - [ux] Improved visibility of focus styles by adding a gap between the radio and focus ring. This makes the focus ring easier to distinguish to a selected radio, which is also blue.

6.0.2

Patch Changes

  • #71177 a82da4c52cfb - Fix type bug where 'crossOrigin' appeared as a required prop for Radio

6.0.1

Patch Changes

  • #61610 6b5d817a38e9 - Expose a testId on RadioGroup. This applies data-testid to the root level element, as well as propagates the value to Radio children.

6.0.0

Major Changes

  • #41866 ed8b6957789 - Removes any usage of deprecated legacy theming APIs. These have been superseeded by design tokens.

5.6.10

Patch Changes

  • #39802 d6eab5e857c - Fix loose inequality check in determining if a radio button is checked or not.

5.6.9

Patch Changes

5.6.8

Patch Changes

5.6.7

Patch Changes

  • #36754 4ae083a7e66 - Use @af/accessibility-testing for default jest-axe config and jest-axe import in accessibility testing.

5.6.6

Patch Changes

5.6.5

Patch Changes

  • #35441 599bfe90ee3 - Internal change to use shape tokens. There is no expected visual change.

5.6.4

Patch Changes

5.6.3

Patch Changes

  • #35194 53ffecf71cb - Updated selected radio to use color.background.selected.bold instead of color.background.brand.bold. There's no visual change as these tokens have same hex value in both light and dark mode.

5.6.2

Patch Changes

  • #32935 b1bdec7cce2 - Internal change to enforce token usage for spacing properties. There is no expected visual or behaviour change.

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

  • #29390 18aeca8c199 - Internal change to update token references. There is no expected behaviour or visual change.

5.4.6

Patch Changes

  • #28090 22d4be4674b - Fixes issue where disabled radios were using the wrong background and border tokens
  • 8e6acf8f038 - Updates tokens used for border and dot, improved tokens appearance when radio is both checked and disabled

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

  • #26303 9827dcb82b8 - No-op change to introduce spacing tokens to design system components.

5.4.1

Patch Changes

5.4.0

Minor Changes

  • #24004 54a5b7576a6 - Updates @emotion/core to @emotion/react; v10 to v11. There is no expected behavior change.

Patch Changes

  • Updated dependencies

5.3.13

Patch Changes

5.3.12

Patch Changes

  • #23381 72cfbe1a536 - Internal code change turning on new linting rules.
  • fe575d49d66 - Updated styles to use new input design tokens
  • Updated dependencies

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

  • #16752 19d72473dfb - The no-unsafe-design-token-usage eslint rule now respects the new token naming conventions when auto-fixing by correctly formatting token ids.
  • 19d72473dfb - 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

5.3.5

Patch Changes

  • Updated dependencies

5.3.4

Patch Changes

  • #15998 f460cc7c411 - Builds for this package now pass through a tokens babel plugin, removing runtime invocations of the tokens() function and improving bundle size.
  • Updated dependencies

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 f276913fa2c - 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

  • af4bca32ad4 - Internal changes to supress eslint rules.
  • 2d7cc544696 - Updates token usage to match the latest token set
  • Updated dependencies

5.2.1

Patch Changes

5.2.0

Minor Changes

5.1.1

Patch Changes

5.1.0

Minor Changes

  • #11113 7af2427f3a8 - [ux] Update form field examples for validation and add a new prop to RadioGroup component

5.0.4

Patch Changes

  • #8644 79c23df6340 - Use injected package name and version for analytics instead of version.json.

5.0.3

Patch Changes

5.0.2

Patch Changes

  • #5497 5f58283e1f - Export types using Typescript's new "export type" syntax to satisfy Typescript's --isolatedModules compiler option. This requires version 3.8 of Typescript, read more about how we handle Typescript versions here: https://atlaskit.atlassian.com/get-started Also add typescript to devDependencies to denote version that the package was built with.

5.0.1

Patch Changes

  • Updated dependencies

5.0.0

Major Changes

  • #4749 44ef6437cd - 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

  • #3885 6c525a8229 - Upgraded to TypeScript 3.9.6 and tslib to 2.0.0

    Since tslib is a dependency for all our packages we recommend that products also follow this tslib upgrade to prevent duplicates of tslib being bundled.

4.0.4

Patch Changes

4.0.3

Patch Changes

  • #3823 e99262c6f0 - All form elements now have a default font explicitly set

4.0.2

Patch Changes

  • #3293 954cc87b62 - The readme and package information has been updated to point to the new design system website.

4.0.1

Patch Changes

4.0.0

Major Changes

Patch Changes

  • Updated dependencies

3.2.3

Patch Changes

  • #2866 54a9514fcf - Build and supporting files will no longer be published to npm

3.2.2

Patch Changes

  • Updated dependencies

3.2.1

Patch Changes

  • #1868 966efe3f95 - Change imports to comply with Atlassian conventions- Updated dependencies

3.2.0

Minor Changes

Patch Changes

3.1.11

Patch Changes

3.1.10

Patch Changes

3.1.9

Patch Changes

3.1.8

Patch Changes

3.1.7

Patch Changes

3.1.6

Patch Changes

3.1.5

Patch Changes

3.1.4

Patch Changes

  • [patch]d222c2b987:

    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

  • [patch]70e57645f2:

    Updates controlled example to show better pattern for state duplication between RadioGroup and Form

3.1.2

Patch Changes

  • [patch]35d2229b2a:

    Adding missing license to packages and update to Copyright 2019 Atlassian Pty Ltd.

3.1.1

Patch Changes

  • [patch]a2d0043716:

    Updated version of analytics-next to fix potential incompatibilities with TS 3.6

3.1.0

Minor Changes

  • [minor]ff521a0e20:

    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

  • [patch]7dc767eabb:

    onChange is now marked as an optional prop

3.0.16

Patch Changes

  • [patch]097b696613:

    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

  • [patch]708028db86:

    Change all the imports to theme in Core to use multi entry points

3.0.13

Patch Changes

  • [patch]de35ce8c67:

    Updates component maintainers

3.0.12

Patch Changes

  • [patch]926b43142b:

    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

  • [patch]9f8ab1084b:

    Consume analytics-next ts type definitions as an ambient declaration.

3.0.10

Patch Changes

  • [patch]bbff8a7d87:

    Fixes bug, missing version.json file

3.0.9

Patch Changes

  • [patch]18dfac7332:

    In this PR, we are:

    • Re-introducing dist build folders
    • Adding back cjs
    • Replacing es5 by cjs and es2015 by esm
    • Creating folders at the root for entry-points
    • Removing the generation of the entry-points at the root Please see this ticket or this page for further details

3.0.8

Patch Changes

  • [patch]d0db01b410:

    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

3.0.5

Patch Changes

  • [patch]4615439434:

    index.ts will now be ignored when publishing to npm

3.0.4

Patch Changes

3.0.3

3.0.2

3.0.1

  • [patch]b0ef06c685:
    • 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:
    • @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:
    • 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

  • [major]6c4e41ff36:
    • This major release indicates that this package is no longer under dev preview but is ready for use

0.5.3

0.5.2

0.5.1

0.5.0

  • [minor]76299208e6:

    • 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 (for external) if you have any questions or queries about this.

0.4.7

  • [patch]942e0aec04:
    • Added test to make sure props are passed hidden input

0.4.6

0.4.5

0.4.4

0.4.3

0.4.2

0.4.1

0.4.0

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

0.3.0

  • [minor]8199088:
    • BREAKING: defaultCheckedValue and checkedValue props in the RadioGroup component now changed to defaultValue and value respectively

0.2.4

  • [patch] Adds missing implicit @babel/runtime dependency b71751b

0.2.3

0.2.2

  • [patch] Fixing analytics events for checkbox/radio/select 3e428e3

0.2.1

  • [patch] Fixed radio indent styling 88520b2

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

0.1.0

  • [minor] Dev release of @atlaskit/radio 2b37611

0.0.3

  • [patch] Adds sideEffects: false to allow proper tree shaking b5d6d04

0.0.1

  • [patch] Bump radio to include the new version of theme. ea62d3d