Input Label v1.0

The <e-input-label> component is a component that can be used for .

Usage

An e-input-label has attributes that must be provided,

<e-input-label
  checked=""
  inherit=""
/>

Attributes

id | Type: String | required
label | Type: String | Default: ''
options | Type: Array | Default: selectOptions

Examples

Below a few interactive examples of e-input-label can be found.

Default

<e-input-label
  id="inputLabel"
  checked=""
  inherit=""
/>

Labelled, label='textInput with Label'

<e-input-label
  :id="'inputLabelWithOptions'"
  checked=""
  inherit=""
/>

Source Code

e-input-label.vue

<script setup lang="ts">
import { computed } from 'vue';

import { EInput_Label } from 'types/e-input/interfaces/EInput_Label';

export type Props = EInput_Label;
const props = withDefaults(defineProps<Props>(), {
  value: '',
  required: false,
  disabled: false,
  meta: () => {
    return {
      disabled: false
    };
  }
});

const textValue = computed(() => props.value || '');
</script>

<template>
  <label
    class="e-input-label"
    :for="id"
    :title="textValue"
    :aria-label="textValue"
  >
    <slot>
      {{ textValue }}
    </slot>
  </label>
</template>

<style scoped lang="scss">
.e-input-label {
  margin: 0;
  text-indent: 10px;
  font-family: var(--e-body-font-family);
  font-weight: bold;
  font-size: 14px;

  a {
    cursor: pointer;
  }
}
</style>