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.
Checkbox
We can add a checkbox with the c-checkbox component.
For instance, we can write:
<template>
<c-box>
<c-checkbox default-is-checked>Checkbox</c-checkbox>
</c-box>
</template>
<script>
import { CBox, CCheckbox } from "@chakra-ui/vue";
export default {
components: {
CBox,
CCheckbox,
},
};
</script>
We set the defualt-is-checked prop to make it checked by default.
Also, we can disable the checkbox with the is-disabled prop:
<template>
<c-box>
<c-checkbox is-disabled>Checkbox</c-checkbox>
</c-box>
</template>
<script>
import { CBox, CCheckbox } from "@chakra-ui/vue";
export default {
components: {
CBox,
CCheckbox,
},
};
</script>
To change the color of the checkbox, we can set the variant-color prop:
<template>
<c-box>
<c-checkbox variant-color="red" default-is-checked> Checkbox </c-checkbox>
</c-box>
</template>
<script>
import { CBox, CCheckbox } from "@chakra-ui/vue";
export default {
components: {
CBox,
CCheckbox,
},
};
</script>
We can change the size of the checkbox with the size prop:
<template>
<c-box>
<c-checkbox size="lg" variant-color="red" default-is-checked>
Checkbox
</c-checkbox>
</c-box>
</template>
<script>
import { CBox, CCheckbox } from "@chakra-ui/vue";
export default {
components: {
CBox,
CCheckbox,
},
};
</script>
The is-indeterminate prop lets us set the checkbox to an indeterminate state:
<template>
<c-box>
<c-checkbox is-indeterminate> Checkbox </c-checkbox>
</c-box>
</template>
<script>
import { CBox, CCheckbox } from "@chakra-ui/vue";
export default {
components: {
CBox,
CCheckbox,
},
};
</script>
To add a checkbox group, we can use the c-checkbox-group component:
<template>
<c-box>
<c-checkbox-group variant-color="green" :default-value="['apple', 'grape']">
<c-checkbox value="apple">apple</c-checkbox>
<c-checkbox value="orange">orange</c-checkbox>
<c-checkbox value="grape">grape</c-checkbox>
</c-checkbox-group>
</c-box>
</template>
<script>
import { CBox, CCheckbox, CCheckboxGroup } from "@chakra-ui/vue";
export default {
components: {
CBox,
CCheckbox,
CCheckboxGroup,
},
};
</script>
We add the default-value prop to set the checkbox with the given value prop value by default.
Conclusion
We can add a checkbox with Chakra UI Vue.
