Select

import { Select } from "@/registry/ds/select";

const options = [
  { label: "Primer semestre", value: "1" },
  { label: "Segundo semestre", value: "2" },
  { label: "Intensivo de verano", value: "3", disabled: true },
];

export default function SelectStates() {
  return (
    <div className="grid w-full max-w-xl gap-5 sm:grid-cols-2">
      <Select label="Vacío" options={options} />
      <Select label="Con valor" options={options} defaultValue="1" />
      <Select label="Con error" required options={options} error="Elegí un período para continuar." />
      <Select label="Deshabilitado" disabled options={options} defaultValue="2" />
    </div>
  );
}

import { Select } from "@/registry/ds/select";

const intereses = [
  { label: "Deportes", value: "deportes" },
  { label: "Arte y cultura", value: "arte" },
  { label: "Voluntariado", value: "voluntariado" },
  { label: "Emprendimiento", value: "emprendimiento" },
  { label: "Investigación", value: "investigacion" },
];

export default function SelectMultiple() {
  return (
    <div className="w-72">
      <Select multiple label="Intereses" options={intereses} defaultValue={["arte"]} placeholder="Elegí uno o más" />
    </div>
  );
}

import { Select } from "@/registry/ds/select";

const options = [
  { label: "Mañana", value: "m" },
  { label: "Tarde", value: "t" },
  { label: "Noche", value: "n" },
];

export default function SelectSizes() {
  return (
    <div className="flex w-72 flex-col gap-4">
      <Select size="sm" aria-label="Jornada, small" options={options} placeholder="Small · 32" />
      <Select size="md" aria-label="Jornada, medium" options={options} placeholder="Medium · 40" />
      <Select size="lg" aria-label="Jornada, large" options={options} placeholder="Large · 48" />
    </div>
  );
}