# @material/react-radio

> Material Componens React Radio

Latest version **0.15.0** (published 2019-07-22) · MIT license · 0 weekly downloads

## Install

```sh
npm install @material/react-radio
pnpm add @material/react-radio
yarn add @material/react-radio
bun add @material/react-radio
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.15.0 |
| Published | 2019-07-22 |
| First published | 2018-11-20 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 4 |
| Unpacked size | 139.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | abhiomkar, acdvorak, aprigogin, azakus, bicknellr, bonniez, bwobrien, kfranqueiro, lynnjepsen, material-admin, moog16, patrickrodee, williamernest |
| Keywords | mdc web react, material components react, material design, radio |

## Links

- npm: https://www.npmjs.com/package/@material/react-radio
- Repository: https://github.com/material-components/material-components-web-react
- Homepage: https://github.com/material-components/material-components-web-react#readme
- Issues: https://github.com/material-components/material-components-web-react/issues
- npm.io page: https://npm.io/package/@material/react-radio

## Dependencies (4)

- [classnames](https://npm.io/package/classnames.md) ^2.2.6
- [@material/radio](https://npm.io/package/@material/radio.md) ^1.1.0
- [@material/form-field](https://npm.io/package/@material/form-field.md) ^0.41.0
- [@material/react-ripple](https://npm.io/package/@material/react-ripple.md) ^0.15.0

## Alternatives

- [@mdxeditor/editor](https://npm.io/package/@mdxeditor/editor.md) — 962.4K weekly downloads
- [mmdb-lib](https://npm.io/package/mmdb-lib.md) — 680.9K weekly downloads
- [playcanvas](https://npm.io/package/playcanvas.md) — 36.2K weekly downloads
- [@glw907/cairn-cms](https://npm.io/package/@glw907/cairn-cms.md) — 967 weekly downloads
- [markdown-to-confluence](https://npm.io/package/markdown-to-confluence.md) — 103 weekly downloads

## Recent versions

- 0.15.0 (latest) — 2019-07-22
- 0.14.1 — 2019-07-02
- 0.14.0 — 2019-06-25
- 0.13.0 — 2019-05-30
- 0.12.0 — 2019-05-01
- 0.11.0 — 2019-03-19
- 0.10.0 — 2019-02-19
- 0.9.0 — 2019-01-23
- 0.8.0 — 2018-12-28
- 0.7.1 — 2018-11-30
- 0.7.0 — 2018-11-20

## README

# React Radio

A React version of an [MDC Radio](https://github.com/material-components/material-components-web/tree/master/packages/mdc-radio).

## Installation

```
npm install @material/react-radio
```

## Usage

### Styles

with Sass:
```js
import '@material/react-radio/index.scss';
```

with CSS:
```js
import '@material/react-radio/dist/radio.css';
```

### Javascript Instantiation

```js
import React from 'react';
import Radio, {NativeRadioControl} from '@material/react-radio';

class MyApp extends React.Component {
  state = {petValue: null};

  render() {    
    return (
      <div>
        <Radio label='Dog' key='dog'>
          <NativeRadioControl
            name='pets'
            value='dog'
            id='dog'
            onChange={(e) => this.setState({petValue: e.target.value})}
          />
        </Radio>
        <Radio label='Cat' key='cat'>
          <NativeRadioControl
            name='pets'
            value='cat'
            id='cat'
            onChange={(e) => this.setState({petValue: e.target.value})}
          />
        </Radio>
    </div>
    );
  }
}
```

> NOTE: The `.mdc-radio` element and the associated label are wrapped around an `.mdc-form-field` element for styling.

## Radio Props

Prop Name | Type | Description
--- | --- | ---
className | String | Classes to be applied to the `.mdc-radio` element.
wrapperClasses | String | Classes to be applied to the `.mdc-form-field` wrapper element.
label | String | Label associated with radio input control.

# NativeRadioControl Props

Prop Name | Type | Description
--- | --- | ---
className | String | Classes to be applied to the `.mdc-radio` element.
checked | Boolean | Default `false`. When true will switch radio to the checked state.
value | String | The associated value with the radio element.
disabled | Boolean | Default `false`. When true will disable the radio element.

## Sass Mixins

Sass mixins may be available to customize various aspects of the Components. Please refer to the
MDC Web repository for more information on what mixins are available, and how to use them.

[Advanced Sass Mixins](https://github.com/material-components/material-components-web/blob/master/packages/mdc-radio/README.md#sass-mixins)

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