Radio Group

Forms

About

A single-choice radio group with optional per-item descriptions, disabled items, horizontal/vertical layout, server-driven options, keyboard roving-focus navigation and native form submission.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Radio Group to your project and fits it to your theme.

Code

How Radio Group is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import RadioGroup, { Radio } from "@/components/ui/radio-group";
import { useState } from "react";

export default function RadioGroupBrandThemeDemo() {
  const [value, setValue] = useState("rust");

  return (
    <RadioGroup
      label="Hull paint"
      value={value}
      onChange={setValue}
      style={
        {
          "--sb-brand": "#F5C451",
          "--sb-brand-light": "#FFE08A",
          "--sb-brand-subtle": "rgb(245 196 81 / 0.16)",
        } as React.CSSProperties
      }
    >
      <Radio value="rust">Rust</Radio>
      <Radio value="chrome">Chrome</Radio>
    </RadioGroup>
  );
}