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.
Elements in Inputs
We can add elements in inputs with the c-input-left-element or c-input-right-element components.
c-input-left-element adds an element on the left side of the input.
And c-input-right-element adds an element on the right side of the input.
For instance, we can write:
<template>
<c-box>
<c-input-group size="md">
<c-input
pr="4.5rem"
:type="show ? 'text' : 'password'"
placeholder="Enter password"
v-model="password"
/>
<c-input-right-element width="4.5rem">
<c-button h="1.75rem" size="sm" @click="show = !show">
{{ show ? "Hide" : "Show" }}
</c-button>
</c-input-right-element>
</c-input-group>
</c-box>
</template>
<script>
import {
CBox,
CInputGroup,
CInput,
CInputRightElement,
CButton,
} from "@chakra-ui/vue";
export default {
components: {
CBox,
CInputGroup,
CInput,
CInputRightElement,
CButton,
},
data() {
return {
password: "",
show: false,
};
},
};
</script>
to add a Show button on the right side of the input to let users see what password they entered.
Input Focus and Error
We can set the focus-border-color prop to set the border color when we focus on the input.
For instance, we can write:
<template>
<c-box>
<c-input
focus-border-color="lime"
placeholder="Here is a sample placeholder"
/>
</c-box>
</template>
<script>
import { CBox, CInput } from "@chakra-ui/vue";
export default {
components: {
CBox,
CInput,
}
};
</script>
to set the border color to lime when we focus on it.
We can add the is-invalid prop to show the user that the input is invalid.
And we can set the error-border-color to set the border color of the input when the input is invalid.
For example, we can write:
<template>
<c-box>
<c-input
is-invalid
error-border-color="red.300"
placeholder="Here is a sample placeholder"
/>
</c-box>
</template>
<script>
import { CBox, CInput } from "@chakra-ui/vue";
export default {
components: {
CBox,
CInput,
},
};
</script>
to add the props.
Conclusion
We can add inputs with various styles with Chakra UI Vue.
