NativeSelect

import { NativeSelect } from "@grassroot/ui-react";
 
<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>

<script setup lang="ts">
import { NativeSelect } from "@grassroot/ui-vue";
</script>
 
<template>
  <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>
</template>

import { Component } from "@angular/core";
import { GrassrootNativeSelect } from "@grassroot/ui-angular";
 
@Component({
  selector: "app-example",
  standalone: true,
  imports: [GrassrootNativeSelect],
  template: `
    <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>
  `,
})
export class ExampleComponent {
}

<script lang="ts">
  import { NativeSelect } from "@grassroot/ui-svelte";
</script>
 
<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>

import { NativeSelect } from "@grassroot/ui-solid";
 
export function Example() {
  return (
    <>
      <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>
    </>
  );
}