{#if type === "checkbox"} {:else if type === "textinput"} {:else if type === "textarea"}

{:else if type === "number"}
    <input
        class="b3-text-field fn__flex-center fn__size200"
        id={key}
        type="number"
        bind:value={value}
        on:change={changed}
    />
{:else if type === "button"}
    
    <button
        class="b3-button b3-button--outline fn__flex-center fn__size200"
        id={key}
        on:click={click}
    >
        {button.label}
    </button>
{:else if type === "select"}
    
    <select
        class="b3-select fn__flex-center fn__size200"
        id="iconPosition"
        bind:value={value}
        on:change={changed}
    >
        {#each Object.entries(options) as [value, text]}
            <option {value}>{text}</option>
        {/each}
    </select>
{:else if type == "slider"}
    
    <div class="b3-tooltips b3-tooltips__n" aria-label={value}>
        <input
            class="b3-slider fn__size200"
            id="fontSize"
            min={slider.min}
            max={slider.max}
            step={slider.step}
            type="range"
            bind:value={value}
            on:change={changed}
        />
    </div>
{/if}