Search

const [search, setSearch] = useState("");

  const onClick = () => {
    console.log("search:", search);
  };

<form>
      <GoabxFormItem>
        <GoabBlock gap="xs" direction="row">
          <GoabxInput
            type="search"
            name="search"
            value={search}
            onChange={(e) => setSearch(e.value)}
            leadingIcon="search"
          />
          <GoabxButton type="primary" onClick={onClick}>
            Search
          </GoabxButton>
        </GoabBlock>
      </GoabxFormItem>
    </form>

form: FormGroup;

  constructor(private fb: FormBuilder) {
    this.form = this.fb.group({
      search: [""],
    });
  }

  onClick(): void {
    console.log("search:", this.form.controls["search"].value);
  }

<form [formGroup]="form">
  <goabx-form-item>
    <goab-block gap="xs" direction="row">
      <goabx-input
        type="search"
        name="search"
        formControlName="search"
        leadingIcon="search">
      </goabx-input>
      <goabx-button type="primary" (onClick)="onClick()">Search</goabx-button>
    </goab-block>
  </goabx-form-item>
</form>

const searchInput = document.getElementById("search-input");
const searchBtn = document.getElementById("search-btn");
let searchValue = "";

searchInput.addEventListener("_change", (e) => {
  searchValue = e.detail.value;
});

searchBtn.addEventListener("_click", () => {
  console.log("search:", searchValue);
});

<form>
  <goa-form-item version="2">
    <goa-block gap="xs" direction="row">
      <goa-input version="2"
        id="search-input"
        type="search"
        name="search"
        leadingicon="search">
      </goa-input>
      <goa-button version="2" id="search-btn" type="primary">Search</goa-button>
    </goa-block>
  </goa-form-item>
</form>