RadioGroupItem

import { RadioGroupItem } from "@rebasepro/ui";

Props

Prop	Type	Required	Description
id	string	—
value	string	yes
checked	boolean	—
required	boolean	—
className	string	—
disabled	boolean	—

Example

This is the example the design-system sync renders and verifies for this component.

import { RadioGroup, RadioGroupItem, Label } from "@rebasepro/ui";

// RadioGroupItem only renders inside a RadioGroup — full parent composition,
// focused on item-level render states rather than group-level layout.
export const CheckedAndUnchecked = () => (
    <RadioGroup value="email" onValueChange={() => {}} className="flex flex-col gap-3 p-4">
        <div className="flex items-center gap-2">
            <RadioGroupItem value="email" id="notify-email"/>
            <Label htmlFor="notify-email">Email</Label>
        </div>
        <div className="flex items-center gap-2">
            <RadioGroupItem value="sms" id="notify-sms"/>
            <Label htmlFor="notify-sms">SMS</Label>
        </div>
    </RadioGroup>
);