Radio Group

Forms 1

About

A fieldset of radio options with an animated focus halo and a physics-based liquid "pour" transition that slides a dot from the previously-selected option to the newly-selected one.

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 * as React from "react";
import RadioGroup, { RadioGroupItem } from "@/components/ui/radio-group";

export default function RadioGroupDemo() {
  return (
    <div className="flex w-full items-center justify-center p-10">
      <RadioGroup
        legend="Choose a reading room"
        hint="You can change this later."
        defaultValue="quiet"
        className="w-72"
      >
        <RadioGroupItem value="quiet">Quiet room</RadioGroupItem>
        <RadioGroupItem value="group">Group study room</RadioGroupItem>
        <RadioGroupItem value="cafe">Café corner</RadioGroupItem>
      </RadioGroup>
    </div>
  );
}