jamsr_ui_controlled_select_component_quickstart.ts

1"use client";
2
3import React from "react";
4import { Select, SelectItem } from "@jamsr-ui/select";
5
6export const SelectUsage = () => {
7  const [value, setValue] = React.useState<string>("apple");
8
9  const handleChange = (val: string) => {
10    setValue(val);
11  };
12
13  return (
14    <div className="flex w-full max-w-xs flex-col gap-4">
15      <Select
16        label="Favorite Fruit"
17        placeholder="Select a fruit"
18        value={value}
19        onValueChange={handleChange}
20      >
21        <SelectItem value="apple">Apple</SelectItem>
22        <SelectItem value="banana">Banana</SelectItem>
23        <SelectItem value="orange">Orange</SelectItem>
24        <SelectItem value="strawberry">Strawberry</SelectItem>
25      </Select>
26      <p className="text-default-500 text-small">Selected: {value}</p>
27    </div>
28  );
29};
30
31export default SelectUsage;