@workday/canvas-kit-docs/dist/mdx/react/radio/Radio.mdx

Documentation components of Canvas Kit components

import {
  ExampleCodeBlock,
  StorybookStatusIndicator,
  SymbolDoc,
  Specifications,
} from '@workday/canvas-kit-docs';

import {InformationHighlight} from '@workday/canvas-kit-preview-react/information-highlight';

import Caution from './examples/Caution';
import Basic from './examples/Basic';
import Disabled from './examples/Disabled';
import Inverse from './examples/Inverse';
import Error from './examples/Error';
import LabelPosition from './examples/LabelPosition';
import NoValue from './examples/NoValue';
import RefForwarding from './examples/RefForwarding';
import Required from './examples/Required';


# Canvas Kit Radio <StorybookStatusIndicator type="deprecated" />

<InformationHighlight className="sb-unstyled" variant="caution" cs={{p: {marginBlock: 0}}}>
  <InformationHighlight.Icon />
  <InformationHighlight.Body>
    `Radio` in Main has been deprecated and will be removed in a future major version. Please use
    `Radio` in Preview instead.
  </InformationHighlight.Body>
  <InformationHighlight.Link href="https://workday.github.io/canvas-kit/?path=/docs/preview-inputs-radio--docs">
    Radio Docs
  </InformationHighlight.Link>
</InformationHighlight>

Radio Buttons allow a user to select one value from a predefined list of 7 or fewer options.

[> Workday Design Reference](https://design.workday.com/components/inputs/radio-buttons)

## Installation

```sh
yarn add @workday/canvas-kit-react
```

## Usage

### Basic Example

Radio Buttons are intended to be grouped together using a Radio Group.

Radio Group should be used in tandem with [Form Field](/components/inputs/form-field/) where the
`useFieldset` prop is set to `true` to meet accessibility standards.

<ExampleCodeBlock code={Basic} />

### Disabled

Set the `disabled` prop of the Radio Button to prevent users from interacting with it. Be careful
not to disable a pre-selected Radio Button, this will block keyboard access from the entire Radio
Group.

<ExampleCodeBlock code={Disabled} />

### Inverse

Radio with inverse variant

<ExampleCodeBlock code={Inverse} />

### Radio Buttons with No Values

The `value` prop may be omitted from Radio Buttons, in which case the `value` prop of the Radio
Group should be set using the zero-based index of the selected Radio Button.

<ExampleCodeBlock code={NoValue} />

### Ref Forwarding

Radio Button supports [ref forwarding](https://reactjs.org/docs/forwarding-refs.html). It will
forward `ref` to its underlying `<input type="radio">` element.

<ExampleCodeBlock code={RefForwarding} />

### Label Position Horizontal

Set the `orientation` prop of the Form Field to designate the position of the label relative to the
input component. By default, the orientation will be set to `vertical`.

<ExampleCodeBlock code={LabelPosition} />

### Required

Set the `required` prop of the wrapping Form Field to `true` to indicate that the field is required.
Labels for required fields are suffixed by a red asterisk.

<ExampleCodeBlock code={Required} />

### Error States

Set the `error` prop of the wrapping Form Field to `"caution"` or
`"error"` to set the Radio Group to the Caution or Error state, respectively. You
will also need to set the `hintId` and `hintText` props on the Form Field to meet accessibility
standards.

#### Caution

<ExampleCodeBlock code={Caution} />

#### Error

<ExampleCodeBlock code={Error} />

## Component API

<SymbolDoc name="Radio" fileName="/react/" />

### RadioGroup

<SymbolDoc name="RadioGroup" fileName="/react/" />

## Specifications

<Specifications file="Radio.spec.ts" name="Radio" />