radio.mdx

import SEO from "../components/SEO"; import Vue from 'vue' Vue.component('CustomRadio', { name: 'CustomRadio', props: { isChecked: Boolean, isDisabled: Boolean, value: [String, Number], m: String }, render (h) { return h('c-button', { props: { ...this.$props, isDisabled: this.isDisabled, variantColor: this.isChecked ? 'red' : 'gray' }, attrs: { role: 'radio', 'aria-checked': this.isChecked } }, this.$slots.default) } })

Radio

Native HTML radios are 100% accessible by default, so we used a very common CSS technique to style the radio.

The Radio component composes CControlBox, a component we created to make it easy to style sibling inputs. Check it out

Installation

import { Radio, RadioGroup } from "@chakra-ui/vue";

Usage

<template>
  <c-stack>
    <c-radio-group v-model="selectedHokage">
      <c-radio value="1">First Hokage</c-radio>
      <c-radio value="2">Second Hokage</c-radio>
      <c-radio value="3">Third Hokage</c-radio>
    </c-radio-group>
    <c-text>
      Favourite Hokage: {{ selectedHokage }}
    </c-text>
  </c-stack>
</template>

<script>
export default {
  data () {
    return {
      selectedHokage: '2'
    }
  }
}
</script>

Radio with custom color

You can override the color scheme of the Radio to any color key specified in $chakraTheme.colors.

Usage

<template>
  <c-stack>
    <c-radio-group v-model="color">
      <c-radio variant-color="red" value="red">Radio</c-radio>
      <c-radio variant-color="green" value="green">Radio</c-radio>
    </c-radio-group>
    <c-text>
      Color: {{ color }}
    </c-text>
  </c-stack>
</template>

<script>
export default {
  data () {
    return {
      color: 'green'
    }
  }
}
</script>

Radio sizes

The checkbox comes with 3 sizes

<c-radio-group>
  <c-radio size="sm" name="1" variant-color="red">
    Radio
  </c-radio>
  <c-radio size="md" name="1" variant-color="green">
    Radio
  </c-radio>
  <c-radio size="lg" name="1" variant-color="orange" default-is-checked>
    Radio
  </c-radio>
</c-radio-group>

Disabled radios

<template>
  <c-stack>
    <c-radio-group v-model="selectedVertical">
      <c-radio value="1" is-disabled>Disabled</c-radio>
      <c-radio value="2">Unchecked</c-radio>
      <c-radio value="3">Unchecked</c-radio>
    </c-radio-group>
    <c-text>
      Selected: {{ selectedVertical }}
    </c-text>
  </c-stack>
</template>

<script>
export default {
  data () {
    return {
      selectedVertical: '3'
    }
  }
}
</script>

Horizontal alignment

<template>
  <c-stack>
    <c-radio-group v-model="selectedHorizonatal" is-inline>
      <c-radio value="1" is-disabled>Disabled</c-radio>
      <c-radio value="2">Unchecked</c-radio>
      <c-radio value="3">Unchecked</c-radio>
    </c-radio-group>
    <c-text>
      Selected: {{ selectedHorizonatal }}
    </c-text>
  </c-stack>
</template>

<script>
export default {
  data () {
    return {
      selectedHorizonatal: '1'
    }
  }
}
</script>

Invalid Checkbox

<c-radio is-invalid>Radio</c-radio>

Custom Radio Buttons

In some cases, you might need to create components that work like radios but don't look like radios. Chakra exports a CRadioButtonGroup to help with this scenario. Here's what you need to do:

1. Create a component that accepts the isChecked and isDisabled props.
2. Add the component as children of CRadioButtonGroup and pass a value prop to it.
3. If you pass isDisabled to any of it's children, it'll be skipped in the keyboard navigation.

Here we create our custom component before adding it to the template:

const CustomRadio = {
  name: 'CustomRadio',
  props: {
    isChecked: Boolean,
    isDisabled: Boolean,
    value: [String, Number],
    mx: [String, Number]
  },
  template: `
    <c-button
      v-bind="$props"
      :variant-color="isChecked ? 'red' : 'gray'"
      role="radio"
      :aria-checked="isChecked"
    >
      <slot>
    <c-button>
  `
}

Vue.component('CustomButton', CButton)

<template>
  <c-radio-button-group
    :value="value"
    is-inline
    @change="e => { value = e }"
    spacing="4"
  >
    <CustomRadio value="item-1" m="2">Custom Radio 1</CustomRadio>
    <CustomRadio value="item-2" m="2">Custom Radio 2</CustomRadio>
    <CustomRadio value="item-3" m="2">Custom Radio 3</CustomRadio>
    <CustomRadio is-disabled value="item-4" m="2">Custom Radio 4</CustomRadio>
  </c-radio-button-group>
</template>

<script>
export default {
  data () {
    return {
      value: 'item-1'
    }
  }
}
</script>

Props

Name	Type	Default	Description
id	string		The id assigned to input field
name	string		The name of the input field in a radio (Useful for form submission)
value	string or number		The value to be used in the radio input. This is the value that will be returned on form submission
variantColor	string		The color of the radio when it's checked. This should be one of the color keys in the theme (e.g."green", "red")
defaultIsChecked	boolean		If true, the radio will be initially checked
isChecked	boolean		If true, the radio will be checked.
isFullWidth	boolean		If true, the radio should take up the full width of the parent
size	sm, md, lg	md	The size (width and height) of the radio
isDisabled	boolean		If true, the radio will be disabled
isInvalid	boolean		If true, the radio is marked as invalid. Changes style of unchecked state
aria-label	string		An accessible label for the radio in the event that there's no visible label or child text node is passed
aria-labelledby	string		Id that points to the label for the radio in the event that no visible label or child text node is passed

Events

Name	Payload	Description
@change	value	Event emitted when the CRadioGroup value changes shows.
@blur	Event	Event emitted when the CRadio is blurred.
@focus	Event	Event emitted when the CRadio is focused.