Input Checkbox v1.0

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

Usage

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

<e-input-checkbox
  id=""
  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-checkbox can be found.

Default

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

inputCheckbox

Labelled, label='checkboxInput with Label'

<div class="input-example-field">
  <e-input-label
    :id="'inputCheckboxWithLabel'"
    :value="'checkboxInput with Label'"
  />
  <e-input-checkbox
    :id="'inputCheckboxWithOptions'"
    :label="'inputCheckboxWithOptions'"
    checked=""
    inherit=""
  />
</div>

checkboxInput with Label

inputCheckboxWithOptions

Source Code

e-input-checkbox.vue

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

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

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

const emit = defineEmits<{
  (e: 'blur', event: FocusEvent): void;
  (e: 'keyup.enter', event: KeyboardEvent): void;
  (e: 'update:checked', value: boolean): void;
}>();

const input = ref<HTMLInputElement>();

const classes = computed(() => {
  return {
    inherited: props.inherited
  };
});

const isChecked = computed(() => props.checked || props.value == 'true');

const isDisabled = computed(() => props.disabled ?? props.meta?.disabled);

function emitUpdate(event: Event): void {
  const target = event.target as HTMLInputElement;

  emit('update:checked', target.checked);
}
</script>

<template>
  <div class="e-input-checkbox">
    <input
      v-bind="$attrs"
      :id="id"
      ref="input"
      class="input-checkbox"
      :class="classes"
      type="checkbox"
      :checked="isChecked"
      :disabled="isDisabled"
      :required="required"
      @change="emitUpdate"
    />
    <label
      :for="id"
      :title="label"
      v-text="label"
    />
  </div>
</template>

<style scoped lang="scss">
$checkbox-container-width: 50px;
$checkbox-size: calc($checkbox-container-width / 2);
$e-checkbox-light-gray: #e2e8f0;
$e-checkbox-gray: #cbd5e0;
$e-checkbox-dark-gray: #a0aec0;
$e-checkbox-teal: #4fd1c5;
$e-checkbox-dark-teal: #319795;

.e-input-checkbox {
  cursor: pointer;
  display: flex;
  align-items: center;
  padding: 0 5px;
  gap: 5px;

  /* Visually hide the checkbox input */
  .input-checkbox {
    &:focus {
      + .checkbox::before {
        border-color: $e-checkbox-gray;
      }

      &:checked {
        + .checkbox::before {
          border-color: $e-checkbox-dark-teal;
        }
      }
    }
  }

  label {
    color: var(--e-body-font-color);
    font-family: var(--e-body-font-family);
    line-height: var(--e-body-font-line-height);
    font-size: var(--e-navigation-button-font-size);
    font-weight: var(--e-body-font-weight);
  }

  &[required] {
    + label::after {
      content: '*';
      padding-left: 2px;
      color: var(--e-required);
      font-weight: bold;
    }
  }
}
</style>