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.
Text Area
We can add a text area with Chakra UI Vue.
To add it, we write:
<template>
<c-box> <c-textarea placeholder="Here is a sample placeholder" /> </c-box>
</template>
<script>
import { CBox, CTextarea } from "@chakra-ui/vue";
export default {
components: {
CBox,
CTextarea,
},
};
</script>
We set the placeholder prop to set the placeholder text.
We can disable the text area with the is-disabled prop:
<template>
<c-box>
<c-textarea is-disabled placeholder="Here is a sample placeholder" />
</c-box>
</template>
<script>
import { CBox, CTextarea } from "@chakra-ui/vue";
export default {
components: {
CBox,
CTextarea,
},
};
</script>
Also, we can add a red border around the text area with the is-invalid prop:
<template>
<c-box>
<c-textarea is-invalid placeholder="Here is a sample placeholder" />
</c-box>
</template>
<script>
import { CBox, CTextarea } from "@chakra-ui/vue";
export default {
components: {
CBox,
CTextarea,
},
};
</script>
Conclusion
We can add a text area easily with Chakra UI Vue.
