docs menuwith hints
RadioGroup
A labelled group of native radio buttons, each in a 44 px row, with optional hints.
import { RadioGroup } from "@meowerse/ui"; · source packages/ui/src/components/RadioGroup.tsx
variants and states
try it
chosen: system
working: loading the demo…
demo source
import { useState } from "react";
import { RadioGroup } from "@meowerse/ui";
export default function Demo() {
const [v, setV] = useState("system");
return (
<div className="demo">
<RadioGroup name="demo-theme" legend="theme" value={v} onChange={setV} options={[
{ label: "follow the system", value: "system" }, { label: "dark", value: "dark" }, { label: "light", value: "light", hint: "day paper" },
]} />
<p role="status" className="demo__out">chosen: {v}</p>
</div>
);
}
props
| prop | type | default | required |
|---|---|---|---|
name | string the shared name of the underlying radio inputs. | — | yes |
legend | string the group's fieldset legend. | — | yes |
options | RadioOption[] the choices to offer. | — | yes |
value | string the currently selected option's value. | — | yes |
onChange | (v: string) => void called with the newly selected option's value. | — | yes |
className | string extra class names to append. | — | no |
css custom properties
| variable | dark | light |
|---|---|---|
--c-accent | #00ff82 | #0a6e3c |
--c-fg-muted | #b3b3af | #46464a |
--c-fg-subtle | #8c8c88 | #5e5e5b |
--c-line | #232326 | #cfcec8 |
--control-height | 44px | same |
--fs-1 | 0.75rem | same |
--fs-2 | 0.8125rem | same |
--fs-3 | 0.875rem | same |
--r-m | 4px | same |
--sp-1 | 4px | same |
--sp-2 | 8px | same |
--sp-3 | 12px | same |
Classes: .mw-radio. Set any of these variables on an ancestor (or wrap a subtree in .mw-theme--dark / .mw-theme--light) to restyle just that part of a page.
usage
with hints
import { RadioGroup } from "@meowerse/ui";
<RadioGroup name="theme-snippet" legend="theme" options={[{"label":"follow the system","value":"system"},{"label":"dark","value":"dark"},{"label":"light","value":"light","hint":"day paper"}]} value="system" onChange={handleChange} /><fieldset class="mw-radio"><legend>theme</legend><label for="_R_0_-0" class="mw-radio__opt"><input id="_R_0_-0" type="radio" name="theme-snippet" checked="" value="system"/><span>follow the system</span></label><label for="_R_0_-1" class="mw-radio__opt"><input id="_R_0_-1" type="radio" name="theme-snippet" value="dark"/><span>dark</span></label><label for="_R_0_-2" class="mw-radio__opt"><input id="_R_0_-2" type="radio" name="theme-snippet" value="light"/><span>light<em class="mw-radio__hint">day paper</em></span></label></fieldset>accessibility
- A fieldset with a legend; each option's label is tied to its radio.
- Arrow keys move between options, as with any native radio group.
| key | does |
|---|---|
| Tab | enters the group |
| Arrow keys | move the choice |
do and don't
do
- Use it for two to five exclusive choices.
don't
- Don't use it for a single yes/no; use a checkbox.