UI Development with Chakra UI Vue — Control Box

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.

Control Box

We can use the c-control-box component to add a component that changes styles based on a sibling checkbox or radio input.

For instance, we can write:

<template>
  <c-box>
     <label>
      <c-visually-hidden as="input" type="checkbox" default-checked />
      <c-control-box
        border-width="1px"
        size="24px"
        rounded="sm"
        :_checked="{ bg: 'green.500', color: 'white', borderColor: 'green.500' }""
        :_focus="{ borderColor: 'green.600', boxShadow: 'outline' }""
      >
        <c-icon name="check" size="16px" />
      </c-control-box>
      <c-box as="span" vertical-align="top" ml="3">
        Checkbox Label
      </c-box>
    </label>
  </c-box>
</template>

<script>
import { CBox, CControlBox, CIcon, CVisuallyHidden } from "@chakra-ui/vue";
export default {
  components: {
    CBox,
    CControlBox,
    CIcon,
    CVisuallyHidden,
  },
};
</script>

We have the c-control-box component with the _checked prop to set the bg and color props of the c-visually-hidden component when it’s toggled.

And we have the _focus prop to set the borderColor and boxShadow styles of c-visually-hidden when we focus on the checkbox by clicking it.

We can do the same with a radio button:

<template>
  <c-box>
    <label>
      <c-visually-hidden type="radio" as="input" />
      <c-control-box
        size="24px"
        bg="white"
        border="2px"
        rounded="full"
        type="radio"
        borderColor="inherit"
        :_focus="{ boxShadow: 'outline' }"
        :_hover="{ borderColor: 'gray.300' }"
        :_disabled="{ opacity: '40%' }"
        :_checked="{ bg: 'green.500', borderColor: 'green.500' }"
      >
        <c-box w="50%" h="50%" bg="white" rounded="full" />
      </c-control-box>
      <c-box as="span" ml="2" vertical-align="center" user-select="none">
        This is a Radio
      </c-box>
    </label>
  </c-box>
</template>

<script>
import { CBox, CControlBox, CVisuallyHidden } from "@chakra-ui/vue";
export default {
  components: {
    CBox,
    CControlBox,
    CVisuallyHidden,
  },
};
</script>

We have the _disabled prop to set the styles of c-visually-hidden when it’s disabled.

And we have the _hover prop to set the styles of c-visually-hidden when we hover over it.

Conclusion

We can use the c-control-box component to add a component that changes styles based on a sibling checkbox or radio input into our Vue app.