Category: Chakra UI Vue

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.

Loading Spinner

We can add a loading spinner into our Vue app with Chakra UI Vue.

To add it, we write:

<template>
  <c-box>
    <c-spinner />
  </c-box>
</template>

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

export default {
  components: {
    CBox,
    CSpinner,
  },
};
</script>

We add the c-spinner component to display the spinner.

We can change the color of the spinner with the color prop:

<template>
  <c-box>
    <c-spinner color="blue.500" />
  </c-box>
</template>

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

export default {
  components: {
    CBox,
    CSpinner,
  },
};
</script>

And we can change the size of it with the size prop:

<template>
  <c-box>
    <c-spinner size="lg" />
  </c-box>
</template>

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

export default {
  components: {
    CBox,
    CSpinner,
  },
};
</script>

lg is large. We can also set it to xs for extra small, sm for small, md for medium or xl for extra-large.

Other options we can change include the thickness, speed of the spinning, and the color of the empty area.

To change them, we write:

<template>
  <c-box>
    <c-spinner
      thickness="4px"
      speed="0.65s"
      empty-color="green.200"
      color="vue.500"
    />
  </c-box>
</template>

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

export default {
  components: {
    CBox,
    CSpinner,
  },
};
</script>

thickness changes the thickness of the spinner ring.

speed changes the time it takes to complete one rotation cycle.

empty-color sets the color of the empty part of the spinner ring.

Conclusion

We can add a loading spinner into our Vue app with Chakra UI Vue.

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.

Select

Chakra UI Vue comes with a styled select dropdown component.

To add it, we write:

<template>
  <c-box>
    <c-select v-model="fruit" placeholder="Select Fruit">
      <option value="apple">apple</option>
      <option value="orange">orange</option>
      <option value="grape">grape</option>
    </c-select>
  </c-box>
</template>

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

export default {
  components: {
    CBox,
    CSelect,
  },
  data() {
    return {
      fruit: "",
    };
  },
};
</script>

We add the c-select component with v-model to bind the selected value to the fruit reactive property.

The value attribute value of the chosen option will be set as the value of fruit .

placeholder sets the placeholder.

And we add the options with the option tag.

We can set the style variant of the dropdown.

To do this, we just have to set the variant prop:

<template>
  <c-box>
    <c-select variant="filled" v-model="fruit" placeholder="Select Fruit">
      <option value="apple">apple</option>
      <option value="orange">orange</option>
      <option value="grape">grape</option>
    </c-select>
  </c-box>
</template>

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

export default {
  components: {
    CBox,
    CSelect,
  },
  data() {
    return {
      fruit: "",
    };
  },
};
</script>

filled will fill the background with a color.

We can also set it to outline, flushed, or unstyled .

outline adds an outline around the dropdown.

flushed removes the outline.

unstyled means no styles are added to the dropdown.

We can also set the styles of the dropdown ourselves.

To do this, we write:

<template>
  <c-box>
    <c-select
      backgroundColor="tomato"
      borderColor="tomato"
      color="white"
      v-model="fruit"
      placeholder="Select Fruit"
    >
      <option value="apple">apple</option>
      <option value="orange">orange</option>
      <option value="grape">grape</option>
    </c-select>
  </c-box>
</template>

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

export default {
  components: {
    CBox,
    CSelect,
  },
  data() {
    return {
      fruit: "",
    };
  },
};
</script>

backgroundColor sets the background color. borderColor sets the border color. And color sets the text color.

Conclusion

We can add a dropdown easily with Chakra UI Vue.

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.

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.

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.

Progress Bar

We can add a progress bar into our Vue app with the c-progress component.

For instance, we can write:

<template>
  <c-box>
    <c-progress :value="80" />
  </c-box>
</template>

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

export default {
  components: {
    CBox,
    CProgress,
  },
};
</script>

value has the progress value between 0 and 100.

We can change the size with the size prop:

<template>
  <c-box>
    <c-progress :value="80" size="lg" />
  </c-box>
</template>

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

export default {
  components: {
    CBox,
    CProgress,
  },
};
</script>

lg makes it large.

We can also set it to sm for small or md for large.

Also, we can set its height with the height prop:

<template>
  <c-box>
    <c-progress :value="80" height="32px" />
  </c-box>
</template>

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

export default {
  components: {
    CBox,
    CProgress,
  },
};
</script>

We can make it animated with the is-animated prop:

<template>
  <c-box>
    <c-progress :value="80" has-stripe is-animated />
  </c-box>
</template>

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

export default {
  components: {
    CBox,
    CProgress,
  },
};
</script>

has-stripe adds stripes to the progress bar.

Conclusion

We can add progress bars into our Vue app with Chakra UI Vue.