app/src/components/Search.vue

<template>
  <div id="offcanvas-slide" uk-offcanvas>
    <div class="uk-offcanvas-bar secondary text-secondary">
      <div class="uk-nav uk-nav-default">
        <div class="uk-margin">
          <form class="uk-search uk-search-default" action="javascript:void(0)">
            <!-- <span uk-search-icon></span> -->
            <input
              class="uk-search-input text-secondary primary rounded"
              v-model="search_text"
              type="search"
              placeholder="Search Words..."
            />
            <div class="uk-margin">
              <button
                class="uk-button uk-button-default uk-button-small text-secondary primary rounded"
              >
                Search
              </button>
            </div>
          </form>
        </div>

        <div class="uk-margin">
          <div class="uk-margin">
            <div class="uk-button-group text-primary">
              <button
                class="uk-button uk-button-default uk-button-small text-secondary primary uk-active"
              >
                ALL WORDS
              </button>
              <button
                class="uk-button uk-button-default uk-button-small text-secondary primary"
              >
                ANY WORDS
              </button>
              <button
                class="uk-button uk-button-default uk-button-small text-secondary primary"
              >
                PHRASE
              </button>
            </div>
          </div>
          <div class="uk-margin">
            <div class="uk-button-group">
              <button
                class="uk-button uk-button-default uk-button-small text-secondary primary uk-active"
              >
                BIBLE
              </button>
              <button
                class="uk-button uk-button-default uk-button-small text-secondary primary"
              >
                OT
              </button>
              <button
                class="uk-button uk-button-default uk-button-small text-secondary primary"
              >
                NT
              </button>
              <button
                class="uk-button uk-button-default uk-button-small text-secondary primary"
              >
                CHAPTER
              </button>
            </div>
          </div>
          <div class="uk-button-group" data-uk-button-radio>
            <label class="uk-button primary">
              <input
                class="primary"
                type="radio"
                checked="checked"
                v-model="gender"
                value="0"
                style="display: none"
              />
              Male
            </label>
            <label class="uk-button primary">
              <input
                type="radio"
                v-model="gender"
                value="1"
                style="display: none"
              />
              Female
            </label>
          </div>
          {{ gender }}
          <!-- <input type="color" name="theme" id=""> -->
          <div class="uk-margin">
            <div class="uk-button-group">
              <button
                class="uk-button uk-button-default uk-button-small text-secondary primary uk-active"
              >
                EXACT MATCH
              </button>
              <button
                class="uk-button uk-button-default uk-button-small text-secondary primary"
              >
                PARTIAL MATCH
              </button>
            </div>
          </div>
          <div class="uk-margin">
            <div class="uk-button-group">
              <button
                class="uk-button uk-button-default uk-button-small text-secondary primary uk-active"
              >
                CASE INSENSITIVE
              </button>
              <button
                class="uk-button uk-button-default uk-button-small text-secondary primary"
              >
                CASE SENSITIVE
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      search_text: "",
      search_area: "",
      match: "",
      sensitivity: "",
      words: "",
      gender: "",
    };
  },
  methods: {},
};
</script>