{#if textarea} {#if maxLength} {/if}

{:else}
      {#if renderLeadingIcon}
        {#if useIconButton}
          <IconButton
            {_bb}
            {icon}
            context="mdc-text-field__icon mdc-text-field__icon--leading"
            onClick={iconButtonClick} />
        {:else}
          <Icon context="text-field__icon" {icon} />
        {/if}
      {/if}
      <input
        {id}
        {disabled}
        class={inputClasses}
        {type}
        {required}
        {minLength}
        maxLength={safeMaxLength}
        placeholder={!!label && fullwidth ? label : placeholder}
        {value}
        aria-label={`Textfield ${variant}`}
        on:focus={focus}
        on:input={changed} />
      {#if renderTrailingIcon}
        {#if useIconButton}
          <IconButton
            {_bb}
            {icon}
            context="mdc-text-field__icon mdc-text-field__icon--trailing"
            onClick={iconButtonClick} />
        {:else}
          <Icon context="text-field__icon" {icon} />
        {/if}
      {/if}
      {#if variant !== 'outlined'}
        <div class="mdc-line-ripple" />
      {/if}
    {/if}
    {#if useNotchedOutline}
      <NotchedOutline {useLabel}>
        {#if useLabel}
          <FloatingLabel forInput={id} text={label} />
        {/if}
      </NotchedOutline>
    {:else if useLabel}
      <FloatingLabel forInput={id} text={label} />
    {/if}
  </div>
  <HelperText
    {persistent}
    {validation}
    {errorText}
    {helperText}
    useCharCounter={!!maxLength && !textarea} />
</div>

.fullwidth {
    width: 100%;
  }
</style>