Monolith Radio group component.
Basic usage of the Monolith Radio Group.
Installation
$ pnpm dlx shadcn@latest add "https://ui.manpuc.me/r/radio-group.json"
Copy Usage
After you add the component with the CLI, import it from your UI folder:
Copy import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group" import { Label } from "@/components/ui/label"
export function MyComponent () { return ( < RadioGroup defaultValue = "option-one" > < div className = "flex items-center space-x-2" > < RadioGroupItem value = "option-one" id = "option-one" /> < Label htmlFor = "option-one" >Option One</ Label > </ div > < div className = "flex items-center space-x-2" > < RadioGroupItem value = "option-two" id = "option-two" /> < Label htmlFor = "option-two" >Option Two</ Label > </ div > </ RadioGroup > ); } Examples
Disabled
Error State
Select a plan Please select a plan before continuing.
API Reference
The RadioGroup component uses Radix UI primitives and extends their attributes.
Prop Type Description defaultValuestringThe value of the radio item that should be checked when initially rendered. valuestringThe controlled value of the radio item to check. onValueChange(value: string) => voidEvent handler called when the value changes. disabledbooleanWhen true, prevents the user from interacting with the radio group. namestringThe name of the radio group, submitted with its owning form as part of a name/value pair.