Select

import { Select } from "@/components/ui/Select";
import { useState } from "react";

// Basic with placeholder
<Select label="Framework" placeholder="Choose a framework">
  <option value="next">Next.js</option>
  <option value="remix">Remix</option>
  <option value="astro">Astro</option>
</Select>

// Controlled
const [region, setRegion] = useState("us-west");
<Select
  label="Region"
  value={region}
  onChange={(e) => setRegion(e.target.value)}
>
  <option value="us-east">US East</option>
  <option value="us-west">US West</option>
  <option value="eu">Europe</option>
</Select>

// Error state
<Select label="Status" error="Please select a status">
  <option value="">Select status</option>
  <option value="active">Active</option>
  <option value="inactive">Inactive</option>
</Select>