NativeSelect

import { NativeSelect } from "@grassroot/ui-react";
 
export default function NativeSelectDemo() {
  return (
    <div className="flex flex-col gap-3.5">
      <NativeSelect aria-label="Region" defaultValue="us-east">
        <option value="us-east">us-east-1</option>
        <option value="us-west">us-west-2</option>
      </NativeSelect>
      <NativeSelect aria-label="Region" invalid defaultValue="us-east">
        …
      </NativeSelect>
    </div>
  );
}

<script setup lang="ts">
import { NativeSelect } from "@grassroot/ui-vue";
</script>
 
<template>
  <div class="flex flex-col gap-3.5">
    <NativeSelect aria-label="Region" default-value="us-east">
      <option value="us-east">us-east-1</option>
      <option value="us-west">us-west-2</option>
    </NativeSelect>
    <NativeSelect aria-label="Region" invalid default-value="us-east">…</NativeSelect>
  </div>
</template>

import { Component } from "@angular/core";
import { GrassrootNativeSelect } from "@grassroot/ui-angular";
 
@Component({
  selector: "app-native-select-demo",
  standalone: true,
  imports: [GrassrootNativeSelect],
  host: { style: "display: contents" },
  template: `
    <div class="flex flex-col gap-3.5">
      <grassroot-native-select aria-label="Region" defaultValue="us-east">
        <option value="us-east">us-east-1</option>
        <option value="us-west">us-west-2</option>
      </grassroot-native-select>
      <grassroot-native-select aria-label="Region" [invalid]="true" defaultValue="us-east"
        >…</grassroot-native-select
      >
    </div>
  `,
})
export class NativeSelectDemoComponent {}
 
export default NativeSelectDemoComponent;

<script lang="ts">
  import { NativeSelect } from "@grassroot/ui-svelte";
</script>
 
<div class="flex flex-col gap-3.5">
  <NativeSelect aria-label="Region" value="us-east">
    <option value="us-east">us-east-1</option>
    <option value="us-west">us-west-2</option>
  </NativeSelect>
  <NativeSelect aria-label="Region" invalid value="us-east">…</NativeSelect>
</div>

/** @jsxImportSource solid-js */
import { NativeSelect } from "@grassroot/ui-solid";
 
export default function NativeSelectDemo() {
  return (
    <div class="flex flex-col gap-3.5">
      <NativeSelect aria-label="Region" value="us-east">
        <option value="us-east">us-east-1</option>
        <option value="us-west">us-west-2</option>
      </NativeSelect>
      <NativeSelect aria-label="Region" invalid value="us-east">
        …
      </NativeSelect>
    </div>
  );
}