UI Development with Chakra UI Vue — Radio Buttons

Chakra UI Vue is a UI framework made for Vue.js that lets us add good-looking UI components into our Vue app.

This article will look at how to get started with UI development with Chakra UI Vue.

Radio Buttons

We can add radio buttons with the c-radio-group and c-radio components.

For instance, we can write:

<template>
  <c-box>
    <c-radio-group v-model="selectedFruit">
      <c-radio value="apple">apple</c-radio>
      <c-radio value="orange">orange </c-radio>
      <c-radio value="grape">grape</c-radio>
    </c-radio-group>
    <c-text> Favourite fruit: {{ selectedFruit }} </c-text>
  </c-box>
</template>

<script>
import { CBox, CRadio, CRadioGroup, CText } from "@chakra-ui/vue";

export default {
  components: {
    CBox,
    CRadio,
    CRadioGroup,
    CText,
  },
  data() {
    return {
      selectedFruit: "apple",
    };
  },
};
</script>

We bind the selected value to a reactive property with v-model .

c-radio has the radio buttons.

We can change the color of the radio button with the variant-color prop:

<template>
  <c-box>
    <c-radio-group v-model="selectedFruit">
      <c-radio variant-color="red" value="apple">apple</c-radio>
      <c-radio variant-color="orange" value="orange">orange </c-radio>
      <c-radio value="grape">grape</c-radio>
    </c-radio-group>
    <c-text> Favourite fruit: {{ selectedFruit }} </c-text>
  </c-box>
</template>

<script>
import { CBox, CRadio, CRadioGroup, CText } from "@chakra-ui/vue";

export default {
  components: {
    CBox,
    CRadio,
    CRadioGroup,
    CText,
  },
  data() {
    return {
      selectedFruit: "apple",
    };
  },
};
</script>

The size prop lets us set the size:

<template>
  <c-box>
    <c-radio-group v-model="selectedFruit">
      <c-radio value="apple">apple</c-radio>
      <c-radio value="orange">orange </c-radio>
      <c-radio value="grape" size="lg">grape</c-radio>
    </c-radio-group>
    <c-text> Favourite fruit: {{ selectedFruit }} </c-text>
  </c-box>
</template>

<script>
import { CBox, CRadio, CRadioGroup, CText } from "@chakra-ui/vue";

export default {
  components: {
    CBox,
    CRadio,
    CRadioGroup,
    CText,
  },
  data() {
    return {
      selectedFruit: "apple",
    };
  },
};
</script>

lg makes it large. We can also set it to sm to make it small or md for medium size.

We can disable a button with the is-disabled prop:

<template>
  <c-box>
    <c-radio-group v-model="selectedFruit">
      <c-radio value="apple">apple</c-radio>
      <c-radio value="orange">orange </c-radio>
      <c-radio value="grape" is-disabled>>grape</c-radio>
    </c-radio-group>
    <c-text> Favourite fruit: {{ selectedFruit }} </c-text>
  </c-box>
</template>

<script>
import { CBox, CRadio, CRadioGroup, CText } from "@chakra-ui/vue";

export default {
  components: {
    CBox,
    CRadio,
    CRadioGroup,
    CText,
  },
  data() {
    return {
      selectedFruit: "apple",
    };
  },
};
</script>

And we can make the radio buttons display side by side with the is-inline prop:

<template>
  <c-box>
    <c-radio-group v-model="selectedFruit" is-inline>
      <c-radio value="apple">apple</c-radio>
      <c-radio value="orange">orange </c-radio>
      <c-radio value="grape">grape</c-radio>
    </c-radio-group>
    <c-text> Favourite fruit: {{ selectedFruit }} </c-text>
  </c-box>
</template>

<script>
import { CBox, CRadio, CRadioGroup, CText } from "@chakra-ui/vue";

export default {
  components: {
    CBox,
    CRadio,
    CRadioGroup,
    CText,
  },
  data() {
    return {
      selectedFruit: "apple",
    };
  },
};
</script>

Conclusion

We can add radio buttons with Chakra UI Vue.