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

Import#

import { CRadio, CRadioGroup } from "@chakra-ui/vue";

Usage#

Favourite Hokage: 2

Editable Example 
<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#

Color: green

Editable Example 
<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 three sizes

Editable Example 
<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#

Selected: 3

Editable Example 
<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#

Selected: 1

Editable Example 
<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#

Editable Example 
<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)
Editable Example 
<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#

NameTypeDefaultDescription
idstringThe id assigned to input field
namestringThe name of the input field in a radio (Useful for form submission)
valuestring or numberThe value to be used in the radio input. This is the value that will be returned on form submission
variantColorstringThe color of the radio when it's checked. This should be one of the color keys in the theme (e.g."green", "red")
defaultIsCheckedbooleanIf true, the radio will be initially checked
isCheckedbooleanIf true, the radio will be checked.
isFullWidthbooleanIf true, the radio should take up the full width of the parent
sizesm, md, lgmdThe size (width and height) of the radio
isDisabledbooleanIf true, the radio will be disabled
isInvalidbooleanIf true, the radio is marked as invalid. Changes style of unchecked state
aria-labelstringAn accessible label for the radio in the event that there's no visible label or child text node is passed
aria-labelledbystringId that points to the label for the radio in the event that no visible label or child text node is passed

Events#

NamePayloadDescription
@changevalueEvent emitted when the CRadioGroup value changes shows.
@blurEventEvent emitted when the CRadio is blurred.
@focusEventEvent emitted when the CRadio is focused.

❤️ Contribute to this page

Caught a mistake or want to contribute to the documentation? Edit this page on GitHub!