RadCN
Inputsreadycomponentready

Radio Group

A native radio group with labelled options, server-rendered default state, browser selection, and tokenized item styling.

Importimport { RadioGroup, RadioGroupItem } from 'radcn/radio-group'
Preview

Live package example

Render the upstream Default, Comfortable, and Compact options with Comfortable checked by default.

Radio Group Demo

Render the upstream Default, Comfortable, and Compact options with Comfortable checked by default.

Preview
import { Label } from 'radcn/label'
import { RadioGroup, RadioGroupItem } from 'radcn/radio-group'

export function RadioGroupDemo() {
  return (
    <RadioGroup name="radio-group-demo">
      <div class="flex items-center gap-3" style="display:flex;align-items:center;gap:0.75rem;">
        <RadioGroupItem value="default" id="r1" name="radio-group-demo" />
        <Label for="r1">Default</Label>
      </div>
      <div class="flex items-center gap-3" style="display:flex;align-items:center;gap:0.75rem;">
        <RadioGroupItem value="comfortable" id="r2" name="radio-group-demo" checked />
        <Label for="r2">Comfortable</Label>
      </div>
      <div class="flex items-center gap-3" style="display:flex;align-items:center;gap:0.75rem;">
        <RadioGroupItem value="compact" id="r3" name="radio-group-demo" />
        <Label for="r3">Compact</Label>
      </div>
    </RadioGroup>
  )
}

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 { RadioGroup, RadioGroupItem } from 'radcn/radio-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

  • RadioGroup renders a role="radiogroup" wrapper and native radio inputs for browser-owned selection behavior.
  • The named demo maps upstream defaultValue="comfortable" to the comfortable native radio being checked in server HTML.
  • Each Label uses for to associate Default, Comfortable, and Compact text with ids r1, r2, and r3.
  • Native radio inputs preserve keyboard and form behavior without React or Radix state.

Customization

  • Group, item, input, and indicator parts expose public data-radcn-radio hooks and package classes.
  • The upstream flex items-center gap-3 row layout maps to explicit class and style evidence on each option row.
  • className maps to class, and apps can customize name, value, checked state, labels, classes, styles, and tokens.
  • Existing disabled, invalid, form-submit-reset, and custom-token fixtures remain evidence for broader Radio Group modifiability.

Remix 3 Notes

  • use client, React component props, and Radix Radio Group primitives map to server-rendered RadCN markup with native radio inputs.
  • RadioGroupPrimitive.Root maps to data-radcn-radio-group with role="radiogroup"; RadioGroupPrimitive.Item maps to RadioGroupItem; RadioGroupPrimitive.Indicator maps to data-radcn-radio-indicator.
  • lucide CircleIcon maps to package CSS indicator presentation, not a lucide-react dependency.
  • className maps to class, cn maps to explicit class composition, and data-slot maps to public data-radcn-radio* hooks.
  • Tailwind grid, gap, flex, items-center, size, rounded-full, border, focus, disabled, invalid, fill, translate, and transition utilities map to package CSS, classes, style, CSS variables, and app-owned CSS.
  • Label htmlFor maps to RadCN Label for while preserving native label/input association.
  • Vendor source remains read-only evidence and is not imported by RadCN.