All components
Chewypixel component

Radio Group

Radio buttons that squish when pressed, with a dot that springs in when picked.

3 to 5 days
1 to 2 days
Next morning

Installation

npx shadcn@latest add https://chewypixel.io/r/radio-group.json

Usage

import { Label } from "@/components/ui/label";
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";

export function ShippingSpeed() {
  return (
    <RadioGroup defaultValue="standard" aria-label="Shipping speed">
      <div className="flex items-center gap-2">
        <RadioGroupItem value="standard" id="standard" />
        <Label htmlFor="standard">Standard</Label>
      </div>
      <div className="flex items-center gap-2">
        <RadioGroupItem value="express" id="express" />
        <Label htmlFor="express">Express</Label>
      </div>
    </RadioGroup>
  );
}

Props

value

The selected value, when controlled.

string

defaultValue

The value that starts selected, when uncontrolled.

string

onValueChange

Called with the new value when the selection changes.

(value: string) => void

Released under the MIT License.

More components

See them in a real app

These components come from Mochi, our admin dashboard template built with Next.js, shadcn/ui and Motion.