RadCN
Inputsreadycomponentready

Toggle Group

A native button group for single or multiple pressed selections with group-level size, variant, spacing, and disabled defaults.

Importimport { ToggleGroup, ToggleGroupItem } from 'radcn/toggle-group'
Preview

Live package example

Render icon-only formatting groups, disabled groups, small and large groups, outline groups, and spaced icon-label choices without React or icon-package dependencies.

Example Parity

Render icon-only formatting groups, disabled groups, small and large groups, outline groups, and spaced icon-label choices without React or icon-package dependencies.

Preview
import { ToggleGroup, ToggleGroupItem } from 'radcn/toggle-group'

function Icon({ label }: { label: string }) {
  return <span aria-hidden="true" class="radcn-toggle-group-icon inline-grid w-[var(--radcn-toggle-icon-size,1rem)] h-[var(--radcn-toggle-icon-size,1rem)] flex-none place-items-center text-[var(--radcn-toggle-icon-fg,currentColor)] font-semibold text-[0.6875rem] leading-none [font-family:var(--radcn-font)] transition-[color,transform] duration-[120ms]">{label}</span>
}

export function ToggleGroupPreview() {
  return (
    <div class="toggle-group-preview">
      <ToggleGroup type="multiple" variant="outline">
        <ToggleGroupItem ariaLabel="Toggle bold" value="bold"><Icon label="B" /></ToggleGroupItem>
        <ToggleGroupItem ariaLabel="Toggle italic" value="italic"><Icon label="I" /></ToggleGroupItem>
        <ToggleGroupItem ariaLabel="Toggle underline" value="underline"><Icon label="U" /></ToggleGroupItem>
      </ToggleGroup>

      <ToggleGroup disabled defaultValue={['bold']} type="multiple">
        <ToggleGroupItem ariaLabel="Toggle bold" value="bold"><Icon label="B" /></ToggleGroupItem>
        <ToggleGroupItem ariaLabel="Toggle italic" value="italic"><Icon label="I" /></ToggleGroupItem>
      </ToggleGroup>

      <ToggleGroup defaultValue={['star']} size="sm" spacing={2} type="multiple" variant="outline">
        <ToggleGroupItem ariaLabel="Toggle star" value="star"><Icon label="S" /> Star</ToggleGroupItem>
        <ToggleGroupItem ariaLabel="Toggle heart" value="heart"><Icon label="H" /> Heart</ToggleGroupItem>
      </ToggleGroup>
    </div>
  )
}

Installation

Intended future install command. RadCN is private and not published to npm yet, so this snippet documents the target user-facing API rather than something external consumers can run today.

pnpm add radcn # intended future package
import { ToggleGroup, ToggleGroupItem } from 'radcn/toggle-group'

Theming

RadCN tokens read the resolved theme from the document. Store the user's preference separately, then resolve system preferences to a concrete light or dark theme before setting package tokens.

<html data-radcn-theme-mode="system" data-radcn-theme="dark">
  ...
</html>

Accessibility

  • ToggleGroup renders a named group of native buttons and each ToggleGroupItem exposes aria-pressed and data-state.
  • Icon-only ToggleGroupItems must provide ariaLabel while app-owned glyphs stay decorative.
  • Single and multiple selection preserve data-value on the group so submitted or enhanced app state can read the selected values.
  • Enhanced groups provide roving focus with arrow keys, Home, End, Space, and Enter while skipping disabled items.

Customization

  • Use group-level size, variant, disabled, and spacing props for common shadcn-style defaults.
  • Use item-level size, variant, disabled, class, and style props when an item intentionally differs from its group.
  • Selected-state styling can target data-state="on" and public classes such as radcn-toggle-group-icon.
  • Spacing maps to --radcn-toggle-group-gap so apps can tune the group without Tailwind utilities.

Remix 3 Notes

  • Radix ToggleGroup maps to RadCN native button markup plus explicit enhanceToggleGroup browser behavior.
  • Lucide icons are presentation choices; examples use app-owned glyphs and decorative spans.
  • Tailwind h-4 w-4 icon utilities map to RadCN classes, inline styles, or CSS variables.
  • Tailwind selected-state selectors map to data-state, data-value, classes, inline styles, and CSS variables.
  • Toggle Group owns selection and focus behavior, but it does not own icon assets or app formatting state.