SpSelect

import { useState } from 'react';
import { SpSelect } from '@silverpoint/react/ui/select';

export function Region() {
  const [region, setRegion] = useState<string | null>('North');
  // items: strings, or { key, label, disabled }; onChange receives the key
  return <SpSelect items={['North', 'East', 'South', 'West']} label="Region" value={region} onChange={setRegion} />;
}

<script setup lang="ts">
import { ref } from 'vue';
import { SpSelect } from '@silverpoint/vue/ui/select';

const region = ref<string | null>('North');
</script>

<template>
  <SpSelect v-model="region" :items="['North', 'East', 'South', 'West']" label="Region" />
</template>

import { Component, signal } from '@angular/core';
import { SpSelect } from '@silverpoint/angular/ui/select';

@Component({
  selector: 'app-region',
  imports: [SpSelect],
  template: `<sp-select [(value)]="region" [items]="regions" label="Region" />`,
})
export class Region {
  protected readonly regions = ['North', 'East', 'South', 'West'];
  protected readonly region = signal<string | null>('North');
}

sp_select(
    ["North", "East", "South", "West"],  # or [{"key", "label", "disabled"}]
    value=State.region,
    on_change=State.set_region,  # receives the value
    label="Region",
)