UI Development with Chakra UI Vue — Flex Container and Form Control

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.

Flex Container

We can add a flex container with the c-flex component.

For instance, we can write:

<template>
  <c-box>
    <c-flex align="center">
      <c-flex bg="green.50" align="flex-end">
        <c-text>Box 1</c-text>
      </c-flex>
      <c-flex bg="blue.50" size="150px" align="center" justify="center">
        <c-text text-align="center" bg="orange.50"> Box 2 </c-text>
      </c-flex>
      <c-box>
        <c-text bg="tomato" color="white"> Box 3 </c-text>
      </c-box>
    </c-flex>
  </c-box>
</template>

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

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

We add the c-flex component to add a container that has the CSS display property set to flex .

The bg prop sets the background color.

align sets the justify-items CSS property.

text-align sets the text-align CSS property.

size sets the width and height.

Form Control

We can add a form control container with the c-form-control component.

For instance, we can write:

<template>
  <c-box>
    <c-form-control>
      <c-form-label for="email">Email address</c-form-label>
      <c-input type="email" id="email" />
      <c-form-helper-text> We'll never share your email. </c-form-helper-text>
    </c-form-control>
  </c-box>
</template>

<script>
import {
  CBox,
  CFormControl,
  CFormLabel,
  CFormHelperText,
  CInput,
} from "@chakra-ui/vue";

export default {
  components: {
    CBox,
    CFormControl,
    CFormLabel,
    CFormHelperText,
    CInput,
  },
};
</script>

We add the c-form-label component to add a label for the input.

c-input is a text input.

c-form-helper-text is a container for the helper text.

Radio Button

We can put radio buttons inside a c-form-control .

To do that, we write:

<template>
  <c-box>
    <c-form-control>
      <c-form-label as="legend">Favorite fruit</c-form-label>
      <c-radio-group default-value="orange">
        <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-form-helper-text> Select only if you're a fan. </c-form-helper-text>
    </c-form-control>
  </c-box>
</template>

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

export default {
  components: {
    CBox,
    CFormControl,
    CFormLabel,
    CFormHelperText,
    CRadio,
    CRadioGroup,
  },
};
</script>

We add the c-radio-group component to group the c-radio components.

as sets the tag to render the component as.

default-value sets the default value to pick from the group.

Each c-radio component has a value prop to set the value.

Conclusion

We can add flex containers and form controls with Chakra UI Vue.