Select

import { Select, SelectOption } from "@raydenui/ui";

<Select placeholder="Select an option">
  <SelectOption value="option1">Option 1</SelectOption>
  <SelectOption value="option2">Option 2</SelectOption>
  <SelectOption value="option3">Option 3</SelectOption>
</Select>

<Select label="Country" placeholder="Select a country">
  <SelectOption value="us">United States</SelectOption>
  <SelectOption value="uk">United Kingdom</SelectOption>
  <SelectOption value="ca">Canada</SelectOption>
</Select>

<Select label="Payment Method" placeholder="Select payment">
  <SelectOption value="card" icon={<Icon name="card" />}>
    Credit Card
  </SelectOption>
  <SelectOption value="bank" icon={<Icon name="bank" />}>
    Bank Transfer
  </SelectOption>
</Select>

<Select label="Assignee" placeholder="Select team member">
  <SelectOption value="john" avatar="/avatars/john.jpg">
    John Doe
  </SelectOption>
  <SelectOption value="jane" avatar="/avatars/jane.jpg">
    Jane Smith
  </SelectOption>
</Select>

<Select label="Status" placeholder="Select status">
  <SelectOption value="active" status="success">
    Active
  </SelectOption>
  <SelectOption value="pending" status="warning">
    Pending
  </SelectOption>
  <SelectOption value="inactive" status="error">
    Inactive
  </SelectOption>
</Select>

const [value, setValue] = useState("");
 
<Select label="Category" value={value} onChange={setValue}>
  <SelectOption value="tech">Technology</SelectOption>
  <SelectOption value="design">Design</SelectOption>
  <SelectOption value="business">Business</SelectOption>
</Select>;