Select

import { Select } from "@grassroot/ui-react";
 
const regions = [
  { value: "us-east-1", label: "us-east-1 · N. Virginia" },
  { value: "us-west-2", label: "us-west-2 · Oregon" },
  { value: "eu-west-1", label: "eu-west-1 · Ireland" },
  { value: "ap-southeast-1", label: "ap-southeast-1 · Singapore" },
];
 
 
const [value, setValue] = React.useState("us-east-1");
 
<Select label="Region" options={regions} value={value} onValueChange={setValue} />

<script setup lang="ts">
import { ref } from "vue";
import { Select } from "@grassroot/ui-vue";
 
const regions = [
  { value: "us-east-1", label: "us-east-1 · N. Virginia" },
  { value: "us-west-2", label: "us-west-2 · Oregon" },
  { value: "eu-west-1", label: "eu-west-1 · Ireland" },
  { value: "ap-southeast-1", label: "ap-southeast-1 · Singapore" },
];
 
const value = ref("us-east-1");
</script>
 
<template>
  <Select v-model="value" label="Region" :options="regions" />
</template>

import { Component, signal } from "@angular/core";
import { GrassrootSelect } from "@grassroot/ui-angular";
 
@Component({
  selector: "app-example",
  standalone: true,
  imports: [GrassrootSelect],
  template: `
    <grassroot-select
      label="Region"
      [options]="regions"
      [value]="value()"
      (valueChange)="value.set($event)"
    />
  `,
})
export class ExampleComponent {
  readonly regions = [
    { value: "us-east-1", label: "us-east-1 · N. Virginia" },
    { value: "us-west-2", label: "us-west-2 · Oregon" },
    { value: "eu-west-1", label: "eu-west-1 · Ireland" },
    { value: "ap-southeast-1", label: "ap-southeast-1 · Singapore" },
  ];
  readonly value = signal("us-east-1");
}

<script lang="ts">
  import { Select } from "@grassroot/ui-svelte";
 
  const regions = [
    { value: "us-east-1", label: "us-east-1 · N. Virginia" },
    { value: "us-west-2", label: "us-west-2 · Oregon" },
    { value: "eu-west-1", label: "eu-west-1 · Ireland" },
    { value: "ap-southeast-1", label: "ap-southeast-1 · Singapore" },
  ];
 
  let value = $state("us-east-1");
</script>
 
<Select
  label="Region"
  options={regions}
  value={value}
  onValueChange={(next) => (value = next)}
/>

import { createSignal } from "solid-js";
import { Select } from "@grassroot/ui-solid";
 
const regions = [
  { value: "us-east-1", label: "us-east-1 · N. Virginia" },
  { value: "us-west-2", label: "us-west-2 · Oregon" },
  { value: "eu-west-1", label: "eu-west-1 · Ireland" },
  { value: "ap-southeast-1", label: "ap-southeast-1 · Singapore" },
];
 
export function Example() {
  const [value, setValue] = createSignal("us-east-1");
 
  return (
    <>
      <Select label="Region" options={regions} value={value()} onValueChange={setValue} />
    </>
  );
}