# @workday/canvas-kit-react-radio

> A Canvas-styled radio

Latest version **4.8.1** (published 2021-07-09) · Apache-2.0 license · 0 weekly downloads

## Install

```sh
npm install @workday/canvas-kit-react-radio
pnpm add @workday/canvas-kit-react-radio
yarn add @workday/canvas-kit-react-radio
bun add @workday/canvas-kit-react-radio
```

## Health

**Score 45/100 (D)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high maintenance score; high quality score.

Warnings: low downloads.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 4.8.1 |
| Published | 2021-07-09 |
| First published | 2019-06-27 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 60.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 361 |
| Author | Workday, Inc. |
| Maintainers | workday-canvas-kit, justin.pante, neema.mahdavi, byed, joseph.le, anicholls |
| Keywords | canvas, canvas-kit, react, components, workday, radio |

## Links

- npm: https://www.npmjs.com/package/@workday/canvas-kit-react-radio
- Repository: http://github.com/Workday/canvas-kit/tree/master/modules/radio/react
- npm.io page: https://npm.io/package/@workday/canvas-kit-react-radio

## Dependencies (2)

- [@workday/canvas-kit-react-core](https://npm.io/package/@workday/canvas-kit-react-core.md) ^4.8.1
- [@workday/canvas-kit-react-common](https://npm.io/package/@workday/canvas-kit-react-common.md) ^4.8.1

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 4.8.1 (latest) — 2021-07-09
- 4.8.3 (support) — 2021-08-13
- 4.7.1-next.18 (next) — 2021-05-31
- 5.0.0-beta.1-next.6 (prerelease-next) — 2021-02-19
- 5.0.0-beta.0 (prerelease) — 2021-02-05
- 4.0.0-prerelease.f1e1a93.16 (canary) — 2020-05-05
- 4.8.2 — 2021-07-12
- 4.8.0 — 2021-06-16
- 4.7.1-next.16 — 2021-05-31
- 4.7.1-next.15 — 2021-05-29
- 4.7.1-next.14 — 2021-05-29
- 4.7.1-next.12 — 2021-05-26
- 4.7.1-next.11 — 2021-05-21
- 4.7.1-next.10 — 2021-05-18
- 4.7.1-next.9 — 2021-05-11
- … 284 more at https://npm.io/package/@workday/canvas-kit-react-radio/versions

## README

# Canvas Kit Radio

Input of type radio

Coming soon:

- Error/Alert handling

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

## Installation

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

or

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

## Usage

#### Simple Example

**Note:** While a base radio component is provided in this package, it is **not accessible** when
used as is. It should be used in tandem with [`FormField`](../../form-field/react) to be made fully
accessible (see below).

```tsx
import * as React from 'react';
import Radio from '@workday/canvas-kit-react-radio';

<Radio disabled={false} checked={checked} onChange={this.handleCheck} />;
```

#### Accessible Example

```tsx
import * as React from 'react';
import Radio from '@workday/canvas-kit-react-radio';
import FormField from '@workday/canvas-kit-react-form-field';

<FormField label="My Field" inputId="my-radio-field">
  <Radio disabled={false} checked={checked} onChange={this.handleCheck} />;
</FormField>;
```

If use inside a FormField doesn't work for your use case, you can use the `aria-labelledby`
attribute.

```tsx
import * as React from 'react';
import Radio from '@workday/canvas-kit-react-radio';
<label id="123">Label</label>
...
<Radio checked={checked} onChange={this.handleCheck} aria-labelledby="123" />;
```

## Static Properties

> None

## Component Props

### Required

> None

### Optional

#### `checked: boolean`

> Whether or not the radio input is checked (`true`) or not checked (`false`)

Default: `false`

---

#### `disabled: boolean`

> Whether or not the radio input is disabled (not able to be checked on or off)

Default: `false`

---

#### `id: string`

> The HTML attribute `id` for the underlying radio input and label component. This is required if
> `label` is defined.

Default: A uniquely generated id

#### `label: string`

> The content of the label associated to the radio input component.

---

#### `onChange: (e: React.ChangeEvent<HTMLInputElement>) => void`

> A callback that gets called everytime the radio input state changes.

---

#### `value: string`

> The `value` attribute of the input radio.

---

#### `inputRef: React.Ref<HTMLInputElement>`

> A ref to the underlying radio input element. Use this to imperatively check or focus this
> component.

# Radio Button Group

> Group of radio inputs. This is a
> [_controlled_](https://reactjs.org/docs/forms.html#controlled-components) component.

## Usage

#### Simple Example

**Note:** While a base radio group component is provided in this package, it is **not accessible**
when used as is. It should be used in tandem with [`FormField`](../../form-field/react) to be made
fully accessible (see below).

```tsx
import * as React from 'react';
import {Radio, RadioGroup} from '@workday/canvas-kit-react-radio';

<RadioGroup name="contact">
  <Radio id="1" value="email" label="E-mail" />
  <Radio id="2" value="phone" label="Phone" />
  <Radio id="3" value="fax" label="Fax (disabled)" disabled={true} />
  <Radio id="4" value="mail" label="Mail" />
</RadioGroup>;
```

#### Accessible Example

```tsx
import * as React from 'react';
import {Radio, RadioGroup} from '@workday/canvas-kit-react-radio';
import FormField from '@workday/canvas-kit-react-form-field';

<FormField label="My Field" useFieldset={true}>
  <RadioGroup name="contact">
    <Radio id="1" value="email" label="E-mail" />
    <Radio id="2" value="phone" label="Phone" />
    <Radio id="3" value="fax" label="Fax (disabled)" disabled={true} />
    <Radio id="4" value="mail" label="Mail" />
  </RadioGroup>
</FormField>;
```

## Static Properties

> None

## Component Props

### Required

#### `children: React.ReactElement<Radio>[]`

> Radio inputs to toggle between.

---

### Optional

#### `value: string | number`

> Identify which item is selected (toggled=true). If a string is passed, the Radio with the
> corresponding value will be selected.

---

#### `onChange: (value:string | number)=> void`

> Callback function when a radio input is selected. The value (if defined) or the index of the input
> will be returned.

---

#### `name: string`

> If specified, will be passed as the common `name` prop to all `Radio` children. This enables you
> to avoid specifying `name` on each child.

---

#### `grow: boolean`

> If true, the button will grow to its container's width.

Default: `false`

---

#### `error: ErrorType`

> The type of error to display, if any.

| Type  | Description                     |
| ----- | ------------------------------- |
| Error | Red outline with error icon.    |
| Alert | Yellow outline with alert icon. |

Default: `undefined`

---
_Source: https://npm.io/package/@workday/canvas-kit-react-radio · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._