Native Select

"use client";

import * as React from "react";
import { Field, FieldLabel } from "@/components/ui/field";
import {
  NativeSelect,
  NativeSelectOptGroup,
  NativeSelectOption,
} from "@/components/ui/native-select";

export function Demo() {
  const [value, setValue] = React.useState("apple");

  return (
    <Field className="w-full max-w-xs">
      <FieldLabel htmlFor="fruit-native">Fruta</FieldLabel>
      <NativeSelect
        id="fruit-native"
        value={value}
        onChange={(e) => setValue(e.target.value)}
        aria-label="Fruta"
      >
        <NativeSelectOption value="">Selecione…</NativeSelectOption>
        <NativeSelectOptGroup label="Comuns">
          <NativeSelectOption value="apple">Maçã</NativeSelectOption>
          <NativeSelectOption value="banana">Banana</NativeSelectOption>
        </NativeSelectOptGroup>
        <NativeSelectOptGroup label="Outras">
          <NativeSelectOption value="blueberry">Mirtilo</NativeSelectOption>
          <NativeSelectOption value="pineapple">Abacaxi</NativeSelectOption>
        </NativeSelectOptGroup>
      </NativeSelect>
      <p className="fe-caption text-muted-foreground">
        Valor: <span className="font-mono">{value || "(vazio)"}</span>
      </p>
    </Field>
  );
}