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! 🙏

Switch

import { h } from "preact" import { useState } from "preact/hooks" import { Switch } from "@/comps/echo/toggle" export const SwitchDemo = () => { const [on, setOn] = useState(false) return <Switch checked={on} onChange={setOn} /> }

Toggle Group (Single/Radio Selection)

import { h, Fragment } from "preact" import { useEffect, useState } from "preact/hooks" import { ToggleGroup, ToggleGroupItem } from "@/comps/echo/toggle" export const ToggleGroupDemo = () => { const [sel, setSel] = useState<string | null>("b") const [sel2, setSel2] = useState<string | null>("foo") return <div class="justify-center items-center flex flex-col"> <ToggleGroup class="mb-6" value={sel} onChange={setSel}> <ToggleGroupItem class="" value="a">A</ToggleGroupItem> <ToggleGroupItem class="" value="b">B</ToggleGroupItem> <ToggleGroupItem class="" value="c">C</ToggleGroupItem> </ToggleGroup> <ToggleGroup value={sel2} onChange={setSel2} spacing={0} itemOnClass="bg-yellow-500"> <ToggleGroupItem value="foo">Foo</ToggleGroupItem> <ToggleGroupItem value="bar">Bar</ToggleGroupItem> <ToggleGroupItem value="ace">Ace</ToggleGroupItem> </ToggleGroup> </div> }

Toggle Group (Multi Selection)

import { h } from "preact" import { useEffect, useState } from "preact/hooks" import { ToggleGroup, ToggleGroupItem } from "@/comps/echo/toggle/ToggleGroup" export const ToggleGroupMultDemo = () => { const [selection, setSelection] = useState<string[]>([]) return ( <ToggleGroup multiple allowEmpty value={selection} onChange={setSelection}> <ToggleGroupItem value="a">A</ToggleGroupItem> <ToggleGroupItem value="b">B</ToggleGroupItem> <ToggleGroupItem value="c">C</ToggleGroupItem> <ToggleGroupItem value="d">D</ToggleGroupItem> </ToggleGroup> ) }