Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x | <template>
<div class="input-field">
<label :for="id" class="input-label">{{ label }}</label>
<input :id="id" type="text" :placeholder="placeholder" :aria-describedby="describedby" v-model="inputValue" class="input-element" />
<p v-if="description" :id="describedby" class="input-description">{{ description }}</p>
</div>
</template>
<script setup lang="ts">
import { computed } from 'vue';
const props = defineProps<{
id: string;
label: string;
placeholder?: string;
description?: string;
modelValue: string;
describedby?: string;
}>();
const emit = defineEmits(['update:modelValue']);
const inputValue = computed({
get: () => props.modelValue,
set: (value: string) => emit('update:modelValue', value),
});
</script>
<style scoped src="././InputField.scss" />
|