45 lines
785 B
Vue
45 lines
785 B
Vue
<template>
|
|
<div class="input-with-label">
|
|
<label class="input-with-label__label">{{ label }}</label>
|
|
<input
|
|
:model-value="value"
|
|
:placeholder="placeholder"
|
|
data-cy="input-with-label-input"
|
|
class="skillbox-input"
|
|
@change:modelValue="$emit('input', $event.target.value)"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: {
|
|
value: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
label: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
placeholder: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@import '~styles/helpers';
|
|
|
|
.input-with-label {
|
|
display: flex;
|
|
flex-direction: column;
|
|
&__label {
|
|
@include regular-text;
|
|
margin-bottom: $small-spacing;
|
|
}
|
|
}
|
|
</style>
|