{#if label} {label} {/if} {#if (!textarea && !select) || autocomplete} {:else if textarea && !select}

{:else if select && !autocomplete}
    <input
      readonly
      class="{iClasses}"
      on:change
      on:input
      on:keydown
      on:keypress
      on:keyup
      {disabled}
      on:click
      on:blur
      on:focus
      {value} />
  {/if}

{#if append}
    <div
      class={aClasses}
      on:click={() => dispatch("click-append")}
    >
      <slot name="append">
        <Icon
          reverse={appendReverse}
          class="{focused ? txt() : ""} {iconClass}"
        >
          {append}
        </Icon>
      </slot>
    </div>
  {/if}

{#if prepend}
    <div
      class={pClasses}
      on:click={() => dispatch("click-prepend")}
    >
      <slot name="prepend">
        <Icon
          reverse={prependReverse}
          class="{focused ? txt() : ""} {iconClass}"
        >
          {prepend}
        </Icon>
      </slot>
    </div>
  {/if}

{#if showHint}
    <Hint
      {error}
      {hint} />
  {/if}
</div>