# @rei-co-op/cedar-radio

> REI Cedar Style Framework - Vue Component for Radio

Latest version **0.0.8** (published 2017-12-15) · ISC license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install @rei-co-op/cedar-radio
pnpm add @rei-co-op/cedar-radio
yarn add @rei-co-op/cedar-radio
bun add @rei-co-op/cedar-radio
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 0.0.8 |
| Published | 2017-12-15 |
| First published | 2017-10-20 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | REI Software Engineering |
| Maintainers | lancetharper, debugxyz, soundtrksamurai, mhewson |

## Links

- npm: https://www.npmjs.com/package/@rei-co-op/cedar-radio
- Homepage: https://rei.github.io/rei-cedar/#cdr-radio
- npm.io page: https://npm.io/package/@rei-co-op/cedar-radio

## Recent versions

- 0.0.8 (latest) — 2017-12-15
- 0.0.7 — 2017-11-29
- 0.0.6 — 2017-11-14
- 0.0.5 — 2017-11-13
- 0.0.4 — 2017-11-08
- 0.0.3 — 2017-10-25
- 0.0.2 — 2017-10-23
- 0.0.1 — 2017-10-20

## README

**NOTE:** `v-model` is required.

### Events
| Name | Type | Description | |
| --- | --- | --- |
| `change` | Boolean or Array | Selected radio value. Fires on selection. |

### Examples

#### Standard checkbox

`v-model` can be anything and is shared to all of the radios in the group.

```
var model = '';

<div>
  <cdr-radio name="example" value="a1" v-model="model">A1</cdr-radio>
  <cdr-radio name="example" value="a2" v-model="model">A2</cdr-radio>
  <cdr-radio name="example" :value="{val:'a3'}" v-model="model">A3</cdr-radio>
  <p>Group A Picked: {{model}}</p>
</div>
```

#### Preselected

`v-model` is preset to one of the values in the group.

```
var model2 = 'a2';

<div>
  <cdr-radio name="example2" value="a1" v-model="model2">A1</cdr-radio>
  <cdr-radio name="example2" value="a2" v-model="model2">A2</cdr-radio>
  <cdr-radio name="example2" :value="{val:'a3'}" v-model="model2">A3</cdr-radio>
  <p>Group A Picked: {{model2}}</p>
</div>
```

#### Event

Open the console to see output.

```
var model3 = '';

function eventExample(val) {
  console.log(val + ' was selected');
}

<div>
  <cdr-radio @change="eventExample" name="example3" value="a1" v-model="model3">A1</cdr-radio>
  <cdr-radio @change="eventExample" name="example3" value="a2" v-model="model3">A2</cdr-radio>
  <cdr-radio @change="eventExample" name="example3" :value="{val:'a3'}" v-model="model3">A3</cdr-radio>
  <p>Group A Picked: {{model3}}</p>
</div>
```

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