Skip to Content
We're rolling out the first batch of Game UIs right now, and it might take a few days to fully wrap up. If you're already testing the UI comps, we'd love to hear any feedback you've got! 🙏
UI DocsECHODropdown

Select Component

import { h } from "preact" import { Select } from "@/comps/echo/dropdown" import { useState } from "onejs-preact/hooks" export function SelectDemo() { const [weapon, setWeapon] = useState("sword") return <div class="w-[300px] h-[100px] flex"> <Select value={weapon} onChange={setWeapon} options={[ { value: "sword", label: "Sword" }, { value: "bow", label: "Bow" }, { value: "staff", label: "Magic Staff" }, ]} /> </div> }

import { h } from "preact" import { Dropdown, DropdownItem } from "@/comps/echo/dropdown" const saveGame = () => console.log("Game saved!") const loadGame = () => console.log("Game loaded!") const quitGame = () => console.log("Game quit!") export function DropdownDemo() { return <div class="w-[300px] h-[100px] flex"> <Dropdown trigger={() => <button class="px-4 py-2 bold">Actions ▾</button>} menuClass="mt-[4px]"> <DropdownItem onSelect={() => saveGame()}>Save</DropdownItem> <DropdownItem onSelect={() => loadGame()}>Load</DropdownItem> <DropdownItem onSelect={() => quitGame()}>Quit</DropdownItem> </Dropdown> </div> }