An accessible dropdown select with listbox keyboard semantics, used to choose one value from a list of labeled options such as a currency or category picker.
"use client";
import { Select } from "@/components/ui/select";
import type { SelectOption } from "@/components/ui/select";
import { useState } from "react";
const options: SelectOption[] = [
{ value: "electric", label: "Electric" },
{ value: "water", label: "Water" },
{ value: "internet", label: "Internet" },
];
export default function SelectStatesDemo() {
const [invalidValue, setInvalidValue] = useState("electric");
const [disabledValue, setDisabledValue] = useState("water");
const [smallValue, setSmallValue] = useState("internet");
return (
<div className="flex min-h-[180px] w-full flex-wrap items-center justify-center gap-6 bg-background p-10 text-foreground">
<Select
options={options}
value={invalidValue}
onValueChange={setInvalidValue}
label="Bills"
invalid
/>
<Select
options={options}
value={disabledValue}
onValueChange={setDisabledValue}
label="Bills"
disabled
/>
<Select
options={options}
value={smallValue}
onValueChange={setSmallValue}
label="Bills"
size="sm"
/>
</div>
);
}
