VibeUI

Button Group

Unit Switch

Переключатель единиц, показывающий пересчитанное значение рядом: оба числа лежат в разметке, а нужное выбирает CSS по отмеченному radio.

  • buttongroup
  • units
  • readout
  • css-only

Превью

1440pxHost theme

Использовать с AI

  1. 1. Скопируйте ссылку.
  2. 2. Напишите агенту своими словами и вставьте её в предложение.
  3. 3. Агент откроет ссылку и поставит компонент из registry.

размести это в шапке: https://vibeui.ru/c/buttongroup-045

Единицы измерения

18 °C64 °Fсредняя за неделю

Показать полную инструкцию

То, что лежит по ссылке в развёрнутом виде. Нужна, если агент не может открыть ссылку — тогда вставьте этот текст целиком.

# Установка и размещение «buttongroup-045» (Unit Switch) из VibeUI

## 1. Сначала установка — не пропускай, не пересоздавай
Выполни эту команду до того, как писать код:
npx shadcn@latest add https://vibeui.ru/r/buttongroup-045.json

Registry item: https://vibeui.ru/r/buttongroup-045.json
Ставится в: components/vibeui/buttongroup-045.tsx (точный путь следует алиасам components.json этого проекта).
npm-зависимости: нет.
Registry-зависимости: нет.

Ставь из реестра. Не пересоздавай по описанию, не подменяй похожим
компонентом из другой библиотеки и не переписывай под стиль проекта.

## 2. Что это
Переключатель единиц, показывающий пересчитанное значение рядом: оба числа лежат в разметке, а нужное выбирает CSS по отмеченному radio.

Компактный переключатель единиц рядом со значением, которое меняется без JS. Ноль зависимостей, один файл, серверный компонент.

## 3. Как использовать
import { Buttongroup045 } from "@/components/vibeui/buttongroup-045"

<Buttongroup045
  metricValue="18 °C"
  imperialValue="64 °F"
  caption="средняя за неделю"
  defaultValue="metric"
/>

Полный список пропсов — в установленном файле.

## 4. Куда поставить
Это мелкий inline-компонент. Поставь его ровно туда, куда просил
пользователь, внутрь существующей разметки. Не создавай ради него
новую страницу, секцию или обёртку. Если на этом месте уже стоит похожий
контрол — замени его, а не добавляй второй.

Куда поставить: ___
(Эту строку заполняет пользователь. Если она осталась пустой — спроси,
а не угадывай.)

## 5. Сохранить как установлено
- локальную палитру --vibeui-buttongroup-045-* и не подменять её токенами вашей темы
- оба значения в разметке: пересчёт в браузере разойдётся с серверным округлением
- фиксированную ширину и табличные цифры у значения — иначе сцепка прыгает при переключении
- соседство значения и переключателя: единица измерения без числа ничего не значит
- radio внутри fieldset, чтобы выбор попадал в форму и работал стрелками
- подпись под значением: «18 °C» без «средняя за неделю» не отвечает, что это за число

## 6. Можно менять
- подписи единиц через metricLabel и imperialLabel
- показываемые числа через metricValue и imperialValue
- пояснение под значением через caption
- исходную систему через defaultValue, имя поля через name и акцент через accent

## 7. Правила
- Единиц ровно две: третья система потребует своего правила показа в CSS.
- Значения — готовые строки: форматирование и округление делает ваш код.
- Скрытое значение остаётся в HTML: оно отправляется браузеру, хотя и не показано.
- Не выносите CSS-переменные в globals.css: компонент обязан оставаться одним файлом.

## 8. Проверка
- рендерится без ошибок в консоли;
- выглядит так же, как превью на странице VibeUI, откуда взята ссылка;
- если нет — ты изменил что-то из раздела 5, верни как было.

Для разработчика

npx shadcn@latest add https://vibeui.ru/r/buttongroup-045.json
https://vibeui.ru/r/buttongroup-045.json

Компонент самодостаточен: один файл, без зависимостей, собственная палитра в переменных --vibeui-buttongroup-045-*. Серверный: пересчёт делается на стороне, отдающей страницу, а не в браузере — поэтому округления и локали не расходятся. Оба значения лежат в разметке, и правило [data-vibeui-block]:has([data-unit="metric"] input:checked) [data-value="metric"]{display:inline} показывает нужное. Значение набрано табличными цифрами и имеет min-width:4.25rem, поэтому «18 °C» и «64 °F» занимают одно место. Сцепка компактная и стоит рядом со значением, а не отдельным блоком: единица без числа бессмысленна.

Исходник компонента

Тот же файл, который поставит агент. Нужен, если вы предпочитаете скопировать код руками.

import type { ComponentPropsWithoutRef, CSSProperties } from "react"

export type Buttongroup045Props = Omit<
  ComponentPropsWithoutRef<"fieldset">,
  "children"
> & {
  metricLabel?: string
  imperialLabel?: string
  metricValue?: string
  imperialValue?: string
  caption?: string
  defaultValue?: "metric" | "imperial"
  name?: string
  accent?: string
}

// Идея компонента: переключатель единиц, который тут же показывает результат
// пересчёта. Оба значения лежат в разметке, и выбранный radio показывает
// нужное правилом CSS — пересчёт делается на сервере при отдаче, а не в
// браузере, поэтому ни округления, ни локали не расходятся. Значение набрано
// табличными цифрами и имеет фиксированную минимальную ширину: «18 °C» и
// «64 °F» занимают одно место, и группа не дёргается при переключении.
// Сама сцепка компактная, потому что стоит рядом со значением, а не отдельно.
const STYLES = `
:where([data-vibeui-block="buttongroup-045"]){
--vibeui-buttongroup-045-surface:oklch(1 0 0);
--vibeui-buttongroup-045-track:oklch(0.955 0.004 265);
--vibeui-buttongroup-045-fg:oklch(0.24 0.016 265);
--vibeui-buttongroup-045-muted:oklch(0.56 0.014 265);
--vibeui-buttongroup-045-border:oklch(0.9 0.006 265);
--vibeui-buttongroup-045-accent:oklch(0.5 0.15 230);
--vibeui-buttongroup-045-radius:0.4375rem;
--vibeui-buttongroup-045-font:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
[data-vibeui-block="buttongroup-045"]{
box-sizing:border-box;display:inline-flex;align-items:center;gap:0.75rem;
margin:0;padding:0.625rem 0.875rem;
border:1px solid var(--vibeui-buttongroup-045-border);border-radius:0.875rem;
background:var(--vibeui-buttongroup-045-surface);
font-family:var(--vibeui-buttongroup-045-font);
}
[data-vibeui-block="buttongroup-045"] *{box-sizing:border-box}
[data-vibeui-block="buttongroup-045"] legend{
position:absolute;width:1px;height:1px;padding:0;margin:-1px;
overflow:hidden;clip-path:inset(50%);white-space:nowrap;
}
[data-vibeui-block="buttongroup-045"] [data-part="readout"]{
display:flex;flex-direction:column;gap:0.0625rem;
}
[data-vibeui-block="buttongroup-045"] [data-part="value"]{
min-width:4.25rem;
color:var(--vibeui-buttongroup-045-fg);
font-size:1.25rem;font-weight:700;line-height:1.1;
font-variant-numeric:tabular-nums;
}
[data-vibeui-block="buttongroup-045"] [data-part="value"] span{display:none}
[data-vibeui-block="buttongroup-045"] [data-part="caption"]{
color:var(--vibeui-buttongroup-045-muted);
font-size:0.6875rem;line-height:1.3;
}
[data-vibeui-block="buttongroup-045"] [data-part="track"]{
display:flex;gap:0.125rem;padding:0.1875rem;
border-radius:calc(var(--vibeui-buttongroup-045-radius) + 0.1875rem);
background:var(--vibeui-buttongroup-045-track);
}
[data-vibeui-block="buttongroup-045"] [data-part="unit"]{
position:relative;
display:inline-flex;align-items:center;justify-content:center;
min-width:2.25rem;height:1.75rem;padding:0 0.375rem;
border-radius:var(--vibeui-buttongroup-045-radius);
color:var(--vibeui-buttongroup-045-muted);
font-size:0.75rem;font-weight:700;line-height:1;cursor:pointer;
transition:background-color .16s ease,color .16s ease;
}
[data-vibeui-block="buttongroup-045"] input{
position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer;
}
[data-vibeui-block="buttongroup-045"] [data-part="unit"]:has(input:checked){
background:var(--vibeui-buttongroup-045-surface);
color:var(--vibeui-buttongroup-045-accent);
box-shadow:0 1px 2px oklch(0.2 0.02 265 / 16%);
}
[data-vibeui-block="buttongroup-045"] [data-part="unit"]:has(input:focus-visible){
outline:2px solid var(--vibeui-buttongroup-045-accent);outline-offset:2px;
}
/* Показывается то значение, чья единица выбрана. */
[data-vibeui-block="buttongroup-045"]:has([data-unit="metric"] input:checked) [data-value="metric"]{display:inline}
[data-vibeui-block="buttongroup-045"]:has([data-unit="imperial"] input:checked) [data-value="imperial"]{display:inline}
@media (prefers-reduced-motion:reduce){[data-vibeui-block="buttongroup-045"] *{animation:none!important;transition:none!important}}
`

/**
 * Переключатель единиц, показывающий пересчитанное значение без JS.
 * Один файл, ноль зависимостей, собственная палитра.
 */
export function Buttongroup045({
  metricLabel = "°C",
  imperialLabel = "°F",
  metricValue = "18 °C",
  imperialValue = "64 °F",
  caption = "средняя за неделю",
  defaultValue = "metric",
  name = "buttongroup-045",
  accent,
  className,
  style,
  ...props
}: Buttongroup045Props) {
  const palette = {
    ...(accent ? { "--vibeui-buttongroup-045-accent": accent } : null),
    ...style,
  } as CSSProperties

  return (
    <>
      <style href="vibeui-buttongroup-045" precedence="medium">
        {STYLES}
      </style>
      <fieldset
        {...props}
        data-vibeui-block="buttongroup-045"
        className={className}
        style={palette}
      >
        <legend>Единицы измерения</legend>
        <p data-part="readout">
          <span data-part="value">
            <span data-value="metric">{metricValue}</span>
            <span data-value="imperial">{imperialValue}</span>
          </span>
          <span data-part="caption">{caption}</span>
        </p>
        <div data-part="track">
          <label data-part="unit" data-unit="metric">
            <input
              type="radio"
              name={name}
              value="metric"
              defaultChecked={defaultValue === "metric"}
            />
            {metricLabel}
          </label>
          <label data-part="unit" data-unit="imperial">
            <input
              type="radio"
              name={name}
              value="imperial"
              defaultChecked={defaultValue === "imperial"}
            />
            {imperialLabel}
          </label>
        </div>
      </fieldset>
    </>
  )
}