Select

Follow these steps to set up a custom Select in your application.

Select.tsx

import {
  SelectContent,
  SelectIndicator,
  SelectItem,
  SelectLabel,
  SelectRoot,
  SelectTrigger,
  SelectValue,
  SelectViewport,
} from "@frend-digital/ui";

const items = [
  {
    name: "Norway",
    value: "NO",
  },
  {
    name: "United states",
    value: "US",
  },
];

export const Select = () => {
  return (
    <SelectRoot defaultValue={"NO"}>
      <SelectLabel>Select a value</SelectLabel>
      <SelectTrigger>
        <SelectValue />
        <SelectIndicator />
      </SelectTrigger>
      <SelectViewport>
        <SelectContent>
          {items?.map((item, i) => (
            <SelectItem key={i} value={item.value}>
              {item.name}
            </SelectItem>
          ))}
        </SelectContent>
      </SelectViewport>
    </SelectRoot>
  );
};