Toggle Group
Snap Rail
A segmented period switch: a pill exactly one third of the track wide glides to the hovered or selected cell.
What you can change
- the rail name through label — it is also the visible caption above the track
- the segment captions through optionText
- defaultValue — which segment starts selected
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/togglegroup-019?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
One file, zero dependencies, the --vibeui-togglegroup-019-* palette. A server component: radios inside the labels hold the selection and CSS works out the cell index on its own. The group is a fieldset with a legend, the track holds three equal flex:1 1 0 cells, and the pill is the track's single ::before at calc((100% - 0.5rem) / 3) — exactly one cell wide rather than as wide as the label. The offset comes from translateX(calc(var(--vibeui-togglegroup-019-i) * 100%)); :has() rules raise the variable, first from the checked radio and then from the hovered cell, so the pill leaves for the cursor and comes back once it is gone. The motion is a 0.45s linear(…) spring. The theme comes from color-scheme through light-dark(), while the .dark class and data-theme="dark" declare color-scheme:dark.
Tags
- togglegroup
- segmented
- radio
- has-selector
- spring
Component source
The same file your agent installs. Here in case you would rather copy it by hand.
Loading…