Components
HeroUI v3 RadioGroup — single-select radio options with descriptions, custom indicators, orientation, controlled/uncontrolled, validation, variants and surface usage.
npx shadcn@latest add https://21st.dev/r/hero_ui/heroui-radio-groupLoading preview...
import { RadioGroup, Radio } from "@/components/ui/heroui-radio-group"
import { Description, Label } from "@heroui/react"
export default function Disabled() {
return (
<RadioGroup isDisabled defaultValue="pro" name="plan-disabled">
<Label>Subscription plan</Label>
<Description>Plan changes are temporarily paused while we roll out updates.</Description>
<Radio value="starter">
<Radio.Content>
<Radio.Control>
<Radio.Indicator />
</Radio.Control>
Starter
</Radio.Content>
<Description>For side projects and small teams</Description>
</Radio>
<Radio value="pro">
<Radio.Content>
<Radio.Control>
<Radio.Indicator />
</Radio.Control>
Pro
</Radio.Content>
<Description>Advanced reporting and analytics</Description>
</Radio>
<Radio value="teams">
<Radio.Content>
<Radio.Control>
<Radio.Indicator />
</Radio.Control>
Teams
</Radio.Content>
<Description>Share access with up to 10 teammates</Description>
</Radio>
</RadioGroup>
)
}
Loading preview...
Loading preview...
Loading preview...
Loading preview...
Loading preview...
Loading preview...
Loading preview...
Loading preview...
Loading preview...