This package has been deprecated

Author message:

This component is deprecated, please migrate to @rei/cedar

@rei/cdr-radio

Props

For the most up-to-date information, see REI Cedar documentation.

name	type	default
labelClass	string	n/a

Adds CSS class to the label for custom styles

name	type	default
inputClass	string	n/a

Adds CSS class to the input for custom styles

name	type	default
contentClass	string	n/a

Adds CSS class to the slot wrapper for custom styles

name	type	default
name	string	n/a

Sets the name of the radio button. Required.

name	type	default
value	string, number, boolean, object, array, symbol, function	false

Sets the value of the radio button. Required

name	type	default
modifier	string	n/a

Modifies the style variants for this component. Possible values: { ‘compact’ | 'hide-figure' }

Slots

name
default

Sets the innerHTML for cdr-radio. This is the readable text for the element

Events

name	arguments
change	value

$emit event fired on radio selection

Installation

Resources are available within the CdrRadio package:

• Component: @rei/cdr-radio
• Component styles: cdr-radio.css

To incorporate the required assets for a component, use the following steps:

1. Install using NPM

Install the CdrRadio package using npm in your terminal:

Terminal

npm i -s @rei/cdr-radio

2. Import Dependencies

main.js

// import your required CSS.
import "@rei/cdr-radio/dist/cdr-radio.css";

3. Add component to a template

local.vue

<template>
  <cdr-radio
    v-model="model"
    name="ship-pref"
    value="ship"
  >
    Ship to address
  </cdr-radio>
  <cdr-radio
    v-model="model"
    name="ship-pref"
    value="pickup"
  >
    Pick up in store
  </cdr-radio>
</template>

<script>
import { CdrRadio} from '@rei/cdr-radio';
export default {
  ...
  components: {
     CdrRadio
  }
}
</script>

Usage

The CdrRadio component requires v-model to track the value of selected radios. Use the hide-figure modifier to hide the radio button itself, which leaves text label as the clickable element. Add appropriate custom styles to convey selected and unselected states.

Modifiers

Following variants are available to the cdr-radio modifier attribute:

Value	Description
'compact'	Sets the spacing for smaller screen sizes
'hide-figure'	Hides the radio button icon

<template>
  <cdr-radio
    v-model="model"
    name="model"
    value="model"
    modifier="hide-figure"
    input-class="no-box"
    content-class="no-box__content"
  >
    Add to cart
  </cdr-radio>
</template>
<style>
.no-box:checked ~ .no-box__content {
   color: green;

   &::after {
     content: '(checked)';
   }
 }
</style>