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.

Package installation information
Install	`yarn add @atlaskit/radio`
Source	Bitbucket.org, (opens new window)
npm	@atlaskit/radio, (opens new window)
Bundle	unpkg.com, (opens new window)

`analyticsContext`
Description	Additional information to be included in the `context` of analytics events that come from radio.
Type	`{ [x: string]: any; }`

`ariaLabel`
Description	The `aria-label` attribute associated with the radio element.
Type	`string`

`createAnalyticsEvent`
Description	You should not be accessing this prop under any circumstances. It is provided by `@atlaskit/analytics-next` and integrated in the component
Type	`(payload: AnalyticsEventPayload) => UIAnalyticsEvent`

`isChecked`
Description	Set the field as checked.
Type	`boolean`

`isDisabled`
Description	Makes a `Radio` field unselectable when true. Overridden by `isDisabled` prop of `RadioGroup`.
Type	`boolean`

`isInvalid`
Description	Marks this as an invalid field.
Type	`boolean`

`isRequired`
Description	Marks this as a required field.
Type	`boolean`

`label`
Description	The label value for the input rendered to the DOM.
Type	`string \| number \| boolean \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal`

`labelId`
Description	This sets the `aria-labelledby` attribute. It sets an accessible name for the radio, for people who use assistive technology. Use of a visible label is highly recommended for greater accessibility support.
Type	`string`

`onChange`
Description	`onChange` event handler, passed into the props of each `Radio` Component instantiated within `RadioGroup`.
Type	`(e: ChangeEvent<HTMLInputElement>, analyticsEvent: UIAnalyticsEvent) => void`

`ref`
Description	No description.
Type	`((instance: HTMLInputElement) => void) \| RefObject<HTMLInputElement>`

`testId`
Description	A `testId` prop is provided for specified elements, which is a unique string that appears as a data attribute `data-testid` in the rendered code, serving as a hook for automated tests we have 2 different testid generated based on the one you pass to the Radio component: `{testId}--radio-input` to check if it got changed to checked/unchecked. `{testId}--radio-label` to click the input.
Type	`string`

`value`
Description	Field value.
Type	`string`

We use this feedback to improve our documentation.