Combobox

const comboboxFixture = {
  id: "combobox",
  label: "Service",
  defaultValue: ["ledger-api"],
  options: [
    { value: "ledger-api", label: "ledger-api" },
    { value: "ledger-worker", label: "ledger-worker" },
    { value: "billing-api", label: "billing-api", disabled: true },
  ],
} as const;
 
import { Combobox } from "@grassroot/ui-react";
 
export default function ComboboxDemo() {
  return (
    <div>
      <Combobox
        id={comboboxFixture.id}
        label={comboboxFixture.label}
        defaultValue={comboboxFixture.defaultValue}
        options={[...comboboxFixture.options]}
      />
    </div>
  );
}

<script setup lang="ts">
import { ref } from "vue";
const comboboxFixture = {
  id: "combobox",
  label: "Service",
  defaultValue: ["ledger-api"],
  options: [
    { value: "ledger-api", label: "ledger-api" },
    { value: "ledger-worker", label: "ledger-worker" },
    { value: "billing-api", label: "billing-api", disabled: true },
  ],
} as const;
 
import { Combobox } from "@grassroot/ui-vue";
const value = ref(comboboxFixture.defaultValue);
</script>
<template>
  <div>
    <Combobox
      v-model="value"
      :label="comboboxFixture.label"
      :options="[...comboboxFixture.options]"
    />
  </div>
</template>

import { Component } from "@angular/core";
const comboboxFixture = {
  id: "combobox",
  label: "Service",
  defaultValue: ["ledger-api"],
  options: [
    { value: "ledger-api", label: "ledger-api" },
    { value: "ledger-worker", label: "ledger-worker" },
    { value: "billing-api", label: "billing-api", disabled: true },
  ],
} as const;
 
import { GrassrootCombobox } from "@grassroot/ui-angular";
@Component({
  selector: "app-combobox-demo",
  standalone: true,
  imports: [GrassrootCombobox],
  template: `<div>
    <grassroot-combobox
      [label]="fixture.label"
      [options]="fixture.options"
      [value]="fixture.defaultValue"
    />
  </div>`,
})
export class ComboboxDemoComponent {
  protected readonly fixture = comboboxFixture;
}
export default ComboboxDemoComponent;

<script lang="ts">
  const comboboxFixture = {
    id: "combobox",
    label: "Service",
    defaultValue: ["ledger-api"],
    options: [
      { value: "ledger-api", label: "ledger-api" },
      { value: "ledger-worker", label: "ledger-worker" },
      { value: "billing-api", label: "billing-api", disabled: true },
    ],
  } as const;
 
  import { Combobox } from "@grassroot/ui-svelte";
</script>
 
<div>
  <Combobox
    label={comboboxFixture.label}
    options={[...comboboxFixture.options]}
    defaultValue={comboboxFixture.defaultValue}
  />
</div>

/** @jsxImportSource solid-js */
const comboboxFixture = {
  id: "combobox",
  label: "Service",
  defaultValue: ["ledger-api"],
  options: [
    { value: "ledger-api", label: "ledger-api" },
    { value: "ledger-worker", label: "ledger-worker" },
    { value: "billing-api", label: "billing-api", disabled: true },
  ],
} as const;
 
import { Combobox } from "@grassroot/ui-solid";
export default function ComboboxDemo() {
  return (
    <div>
      <Combobox
        label={comboboxFixture.label}
        options={[...comboboxFixture.options]}
        defaultValue={comboboxFixture.defaultValue}
      />
    </div>
  );
}