Search

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

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

<form>
  <GoabFormItem>
    <GoabBlock gap="xs" direction="row">
      <GoabInput
        type="search"
        name="search"
        value={search}
        onChange={(e) => setSearch(e.value)}
        leadingIcon="search"
      />
      <GoabButton type="primary" onClick={onClick}>
        Search
      </GoabButton>
    </GoabBlock>
  </GoabFormItem>
</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">
  <goab-form-item>
    <goab-block gap="xs" direction="row">
      <goab-input
        type="search"
        name="search"
        formControlName="search"
        leadingIcon="search"
      >
      </goab-input>
      <goab-button type="primary" (onClick)="onClick()">Search</goab-button>
    </goab-block>
  </goab-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>