Select

const selectFixture = {
  id: "select",
  label: "Region",
  placeholder: "Choose a region",
  defaultValue: ["us-east-1"],
  options: [
    { value: "us-east-1", label: "US East" },
    { value: "eu-west-1", label: "EU West" },
    { value: "ap-southeast-1", label: "Asia Pacific", disabled: true },
  ],
} as const;
 
import { Select } from "@grassroot/ui-react";
 
export default function SelectDemo() {
  return (
    <div>
      <Select
        id={`${selectFixture.id}-react`}
        label={selectFixture.label}
        placeholder={selectFixture.placeholder}
        defaultValue={selectFixture.defaultValue}
        options={[...selectFixture.options]}
      />
    </div>
  );
}

<script setup lang="ts">
import { ref } from "vue";
const selectFixture = {
  id: "select",
  label: "Region",
  placeholder: "Choose a region",
  defaultValue: ["us-east-1"],
  options: [
    { value: "us-east-1", label: "US East" },
    { value: "eu-west-1", label: "EU West" },
    { value: "ap-southeast-1", label: "Asia Pacific", disabled: true },
  ],
} as const;
 
import { Select } from "@grassroot/ui-vue";
const value = ref(selectFixture.defaultValue);
</script>
<template>
  <div>
    <Select
      id="select-vue"
      v-model="value"
      :label="selectFixture.label"
      :options="[...selectFixture.options]"
    />
  </div>
</template>

import { Component } from "@angular/core";
const selectFixture = {
  id: "select",
  label: "Region",
  placeholder: "Choose a region",
  defaultValue: ["us-east-1"],
  options: [
    { value: "us-east-1", label: "US East" },
    { value: "eu-west-1", label: "EU West" },
    { value: "ap-southeast-1", label: "Asia Pacific", disabled: true },
  ],
} as const;
 
import { GrassrootSelect } from "@grassroot/ui-angular";
@Component({
  selector: "app-select-demo",
  standalone: true,
  imports: [GrassrootSelect],
  template: `<div>
    <grassroot-select
      id="select-angular"
      [label]="fixture.label"
      [options]="fixture.options"
      [value]="fixture.defaultValue"
    />
  </div>`,
})
export class SelectDemoComponent {
  protected readonly fixture = selectFixture;
}
export default SelectDemoComponent;

<script lang="ts">
  const selectFixture = {
    id: "select",
    label: "Region",
    placeholder: "Choose a region",
    defaultValue: ["us-east-1"],
    options: [
      { value: "us-east-1", label: "US East" },
      { value: "eu-west-1", label: "EU West" },
      { value: "ap-southeast-1", label: "Asia Pacific", disabled: true },
    ],
  } as const;
 
  import { Select } from "@grassroot/ui-svelte";
 
  let value = $state(selectFixture.defaultValue);
</script>
 
<div>
  <Select
    id="select-svelte"
    label={selectFixture.label}
    options={[...selectFixture.options]}
    bind:value
  />
</div>

/** @jsxImportSource solid-js */
const selectFixture = {
  id: "select",
  label: "Region",
  placeholder: "Choose a region",
  defaultValue: ["us-east-1"],
  options: [
    { value: "us-east-1", label: "US East" },
    { value: "eu-west-1", label: "EU West" },
    { value: "ap-southeast-1", label: "Asia Pacific", disabled: true },
  ],
} as const;
 
import { Select } from "@grassroot/ui-solid";
export default function SelectDemo() {
  return (
    <div>
      <Select
        id={`${selectFixture.id}-solid`}
        label={selectFixture.label}
        placeholder={selectFixture.placeholder}
        options={[...selectFixture.options]}
        defaultValue={selectFixture.defaultValue}
      />
    </div>
  );
}