Combobox

import { Combobox } from "@grassroot/ui-react";
 
const services = [
  { value: "ledger-api", label: "ledger-api" },
  { value: "ledger-worker", label: "ledger-worker" },
  { value: "scheduler", label: "scheduler" },
  { value: "billing-api", label: "billing-api" },
  { value: "auth-gateway", label: "auth-gateway" },
  { value: "search-index", label: "search-index" },
];
 
 
const [value, setValue] = React.useState("ledger-api");
 
<Combobox label="Service" options={services} value={value} onValueChange={setValue} />

<script setup lang="ts">
import { ref } from "vue";
import { Combobox } from "@grassroot/ui-vue";
 
const services = [
  { value: "ledger-api", label: "ledger-api" },
  { value: "ledger-worker", label: "ledger-worker" },
  { value: "scheduler", label: "scheduler" },
  { value: "billing-api", label: "billing-api" },
  { value: "auth-gateway", label: "auth-gateway" },
  { value: "search-index", label: "search-index" },
];
 
const value = ref("ledger-api");
</script>
 
<template>
  <Combobox v-model="value" label="Service" :options="services" />
</template>

import { Component, signal } from "@angular/core";
import { GrassrootCombobox } from "@grassroot/ui-angular";
 
@Component({
  selector: "app-example",
  standalone: true,
  imports: [GrassrootCombobox],
  template: `
    <grassroot-combobox
      label="Service"
      [options]="services"
      [value]="value()"
      (valueChange)="value.set($event)"
    />
  `,
})
export class ExampleComponent {
  readonly services = [
    { value: "ledger-api", label: "ledger-api" },
    { value: "ledger-worker", label: "ledger-worker" },
    { value: "scheduler", label: "scheduler" },
    { value: "billing-api", label: "billing-api" },
    { value: "auth-gateway", label: "auth-gateway" },
    { value: "search-index", label: "search-index" },
  ];
  readonly value = signal("ledger-api");
}

<script lang="ts">
  import { Combobox } from "@grassroot/ui-svelte";
 
  const services = [
    { value: "ledger-api", label: "ledger-api" },
    { value: "ledger-worker", label: "ledger-worker" },
    { value: "scheduler", label: "scheduler" },
    { value: "billing-api", label: "billing-api" },
    { value: "auth-gateway", label: "auth-gateway" },
    { value: "search-index", label: "search-index" },
  ];
 
  let value = $state("ledger-api");
</script>
 
<Combobox
  label="Service"
  options={services}
  value={value}
  onValueChange={(next) => (value = next)}
/>

import { createSignal } from "solid-js";
import { Combobox } from "@grassroot/ui-solid";
 
const services = [
  { value: "ledger-api", label: "ledger-api" },
  { value: "ledger-worker", label: "ledger-worker" },
  { value: "scheduler", label: "scheduler" },
  { value: "billing-api", label: "billing-api" },
  { value: "auth-gateway", label: "auth-gateway" },
  { value: "search-index", label: "search-index" },
];
 
export function Example() {
  const [value, setValue] = createSignal("ledger-api");
 
  return (
    <>
      <Combobox label="Service" options={services} value={value()} onValueChange={setValue} />
    </>
  );
}