<template>
  <div class="list-group list-button d-flex flex-column w-100 mb-2">
    <input type="checkbox" id="buttonID" name="groupName" value="buttonID" aria-required="isRequired">
    <label tabindex="1" for="buttonID" aria-labelledby="buttonID" class="d-flex flex-column justify-content-center py-3 px-4">
      <span class="m-0">Button ID</span>
      <span class="m-0 small">Button Label Subcopy</span>
      <span class="sr-only">Screenreader Text</span>
    </label>
  </div>
</template>

<script>
export default {
  name: "listButton",
};
</script>

<style lang="scss">
.list-group {
  &.list-button {
    input[type="radio"],
    input[type="checkbox"] {
      position: static !important; //override bootstrap
      height: 0;
    }
  }
}
</style>
