Animate UI

Radio Group

A set of checkable buttons—known as radio buttons—where no more than one of the buttons can be checked at a time.

Made by imskyleen
Edit on GitHub
Open in

Installation

Usage

<RadioGroup>
  <RadioGroupItem value="1">
    <RadioGroupItemIndicator />
  </RadioGroupItem>
  <RadioGroupItem value="2">
    <RadioGroupItemIndicator />
  </RadioGroupItem>
  <RadioGroupItem value="3">
    <RadioGroupItemIndicator />
  </RadioGroupItem>
</RadioGroup>

API Reference

RadioGroup

Radix UI API Reference - RadioGroup.Root

RadioGroupItem

Radix UI API Reference - RadioGroup.Item
PropTypeDefault
...props?
HTMLMotionProps<"button">
-

The asChild property is not supported in the RadioGroupItem component, as it is used for animation.

RadioGroupIndicator

Radix UI API Reference - RadioGroup.Indicator
PropTypeDefault
transition?
Transition
{ type: 'spring', stiffness: 200, damping: 16 }
...props?
HTMLMotionProps<"div">
-

The forceMount and asChild properties are not supported in the RadioGroupIndicator component, as it is used for animation.

Credits

Built by Skyleen. The source code is available on GitHub.