# @material-git/radio

> Angular 2 Material radio

Latest version **2.0.0-git.20160919** (published 2016-09-18) · MIT license · 0 weekly downloads

## Install

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

## Health

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

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

Warnings: low downloads.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 2.0.0-git.20160919 |
| Published | 2016-09-18 |
| First published | 2016-09-11 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 25037 |
| Maintainers | material-git |
| Keywords | angular, material, material design, components, radio |

## Links

- npm: https://www.npmjs.com/package/@material-git/radio
- Repository: https://github.com/angular/material2
- Homepage: https://github.com/angular/material2#readme
- Issues: https://github.com/angular/material2/issues
- npm.io page: https://npm.io/package/@material-git/radio

## Alternatives

- [@progress/kendo-ooxml](https://npm.io/package/@progress/kendo-ooxml.md) — 152.1K weekly downloads
- [@progress/kendo-react-ripple](https://npm.io/package/@progress/kendo-react-ripple.md) — 8.0K weekly downloads
- [@progress/kendo-react-orgchart](https://npm.io/package/@progress/kendo-react-orgchart.md) — 4.3K weekly downloads
- [@praxisui/dynamic-fields](https://npm.io/package/@praxisui/dynamic-fields.md) — 2.4K weekly downloads
- [@mesalvo/react-ui](https://npm.io/package/@mesalvo/react-ui.md) — 1.7K weekly downloads

## Recent versions

- 2.0.0-git.20160919 (latest) — 2016-09-18
- 2.0.0-git.20160912 — 2016-09-11

## README

# MdRadio
Radio buttons allow the user to select one option from a set. Use radio buttons for exclusive selection if you think that the user needs to see all available options side-by-side.

![Preview](https://material.angularjs.org/material2_assets/radio/radios.png)

### Setup
Importing the symbols:
```ts
import { MdRadioModule } from '@material-git/radio';
```

Adding providers and directives:
```ts
@NgModule({
  imports: [MdRadioModule],
  ...
})
export class MyAppModule { }
```

### Examples
A basic radio group would have the following markup.
```html
<md-radio-group>
  <md-radio-button value="option_1">1</md-radio-button>
  <md-radio-button value="option_2">2</md-radio-button>
</md-radio-group>
```

A dynamic example, populated from a `data` variable:
```html
<md-radio-group [(value)]="groupValue">
  <md-radio-button *ngFor="let d of data" [value]="d.value">
    {{d.label}}
  </md-radio-button>
</md-radio-group>
```

A dynamic example for use inside a form showing support for `[(ngModel)]`:
```html
<md-radio-group [(ngModel)]="chosenOption">
  <md-radio-button *ngFor="let o of options" [value]="o.value">
    {{o.label}}
  </md-radio-button>
</md-radio-group>
```

## `<md-radio-group>`
### Properties

| Name | Type | Description |
| --- | --- | --- |
| `selected` | `MdRadioButton` | The currently selected button. |
| `value` | `any` | The current value for this group. |
| `disabled` | `boolean` | Whether the group is disabled. |

When selection is changed, an event is emitted from the `change` EventEmitter property.

### Notes
The `md-radio-group` component has no button initially selected.

## `<md-radio-button>`
### Properties

| Name (attribute) | Type | Description |
| --- | --- | --- |
| `id` | `string` | The unique ID of this radio button. |
| `name` | `string` | Group name, defaults to parent radio group if present. |
| `value` | `any` | The value of this radio button. |
| `checked` | `boolean` | Whether the radio is checked. |
| `disabled` | `boolean` | Whether the radio is disabled. |
| `aria-label` | `string` | Used to set the `aria-label` attribute of the underlying input element. |
| `aria-labelledby` | `string` | Used to set the `aria-labelledby` attribute of the underlying input element.
                                 If provided, this attribute takes precedence as the element's text alternative. |

When checked, an event is emitted from the `change` EventEmitter property.

### Notes
* The `md-radio-button` component by default uses the accent color from the theme palette.

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