Radio

A Radio is a way of presenting a user with multiple choices where only one selection is allowed.

Simple Demo

• Use v-model to track your selected value.
• Give each radio a unique value.

<template>
  <div>
    <ci-radio
      v-for="method in shippingMethods"
      :key="method"
      v-model="selectedShippingMethod"
      :value="method"
      :label="method"
    />
  </div>
</template>
<script>
export default {
  data() {
    return {
      shippingMethods: [
        'Standard',
        'Priority',
        'Express',
        'Overnight'
      ],
      selectedShippingMethod: ''
    }
  }
}
</script>

Label

Use the label prop or slot to add a label to your checkbox

<template>
  <div>
    <ci-radio
      v-model="selection"
      label="Labeled radio"
      value="One"
    />
    <ci-radio
      v-model="selection"
      value="Two"
    >
      Labeled radio
    </ci-radio>
  </div>
</template>
<script>
export default {
  data() {
    return {
      selection: ''
    }
  }
}
</script>

Disabled Radios

Use disabled to disable a radio.

<template>
  <ci-radio
    v-model="selection"
    label="Radio Button"
    value="value"
    disabled
  />
</template>
<script>
export default {
  data() {
    return {
      selection: 'value'
    }
  }
}
</script>

Fieldset

Radios can be wrapped in a Fieldset to apply a Legend to the entire group, or to disable an entire group of Radios. See Fieldset for more information.

<template>
  <ci-fieldset
    legend="Shipping Method"
    description="Choose the desired shipping method"
  >
    <ci-radio
      v-for="method in shippingMethods"
      :key="method"
      v-model="selectedShippingMethod"
      :value="method"
      :label="method"
    />
  </ci-fieldset>
</template>
<script>
export default {
  data() {
    return {
      shippingMethods: [
      'Standard',
      'Priority',
      'Express',
      'Overnight'
    ],
    selectedShippingMethod: ''
    }
  }
}
</script>