Button Group
Unit Switch
A unit switch that shows the converted value next to it: both numbers ship in the markup and CSS picks the one whose radio is checked.
What you can change
- the unit captions through metricLabel and imperialLabel
- the displayed numbers through metricValue and imperialValue
- the caption under the value through caption
A link for your AI agent: preview, code and instructions.
Preview
Use it with AI
- 1. Copy the link.
- 2. Write to your agent in your own words and drop the link into the sentence.
- 3. The agent opens the link and installs the component from the registry.
put this on the home page as the hero:
https://vibeui.ru/c/buttongroup-045?lang=en&theme=dark
Not sure where to paste it? Step-by-step guide
Show the full instructions
What the link says, spelled out. Use it when your agent cannot open links — paste this text instead.
Loading…
For developers
The install command lives in the “Component source” block below — a signed link that stays valid for 24 hours.
Technical notes
The component is self-contained: one file, no dependencies, its own palette in the --vibeui-buttongroup-045-* variables. It is a server component: the conversion is done by the side that serves the page rather than in the browser — that is why the rounding and the locales do not drift apart. Both values lie in the markup, and the rule [data-vibeui-block]:has([data-unit="metric"] input:checked) [data-value="metric"]{display:inline} shows the right one. The value is set in tabular figures and has min-width:4.25rem, so "18 °C" and "64 °F" take the same space. The cluster is compact and stands next to the value rather than as a separate block: a unit without a number is meaningless.
Tags
- buttongroup
- units
- readout
- css-only
Component source
The same file your agent installs. Here in case you would rather copy it by hand.
Loading…