<div class="input-group mb-3 input-width" @attributes="OtherAttributes">
  <input type="text" class="form-control" placeholder="Search servers"
    @bind-value="serverFilter"
    @bind-value:event="oninput" />
  <button class="btn btn-outline-secondary" type="button" id="button-search" @onclick="HandleSearch">Search</button>
</div>

@code {
  private string _serverFilter = "";
  private string serverFilter {
    get => _serverFilter;
    set
    {
      _serverFilter = value;
    }
  }

  [Parameter]
  public EventCallback<string> FilterSearchTerm { get; set; }

  [Parameter(CaptureUnmatchedValues = true)]
  // Enables other HTML attributes like class, style, data-x, etc.
  public Dictionary<string, object>? OtherAttributes { get; set; }

  private void HandleSearch()
  {
    FilterSearchTerm.InvokeAsync(serverFilter);
  }

  public void ClearFilter()
  {
    this.serverFilter = string.Empty;
  }
}