@stanfordspezi/spezi-web-design-system
Version:
Stanford Biodesign Digital Health Spezi Web Design System
84 lines (83 loc) • 2.5 kB
TypeScript
import { RadioGroup as RadioGroupPrimitive } from 'radix-ui';
import { ComponentProps, ReactNode } from 'react';
export interface RadioGroupProps<T extends string> extends Omit<ComponentProps<typeof RadioGroupPrimitive.Root>, "value" | "onValueChange" | "defaultValue" | "onChange"> {
/**
* Array of options to be displayed in the radio group.
*/
options: Array<{
label: ReactNode;
value: T;
}>;
/**
* The currently selected value.
*/
value?: T;
/**
* Callback fired when the value changes.
*
* onChange name is used to keep compatibility with {@link Field} component.
*/
onChange?: (value: T) => void;
/**
* Default value to be selected initially for uncontrolled usage.
*/
defaultValue?: T;
/**
* Direction of the radio group.
*
* - `row`: Arranges radio buttons horizontally in a row with wrapping if necessary
* - `column`: Arranges radio buttons vertically in a column
*
* @default "column"
*/
direction?: "row" | "column";
className?: string;
}
/**
* A component that composes a complete radio group with labeled options.
*
* This component renders a list of radio buttons with labels, arranged horizontally or vertically, with appropriate spacing and wrapping behavior.
* It's recommended to use this component instead of the primitive {@link Radio} component, unless you need complex custom behavior.
*
* @template T The type of the value (string usually, but supports enum)
*
* @example
* ```tsx
* // Basic usage with string values
* <RadioGroup
* options={[
* { label: "Option 1", value: "option1" },
* { label: "Option 2", value: "option2" }
* ]}
* onChange={(value) => console.log(value)}
* />
* ```
*
* @example
* ```tsx
* // With controlled value
* const [value, setValue] = useState("option1");
* <RadioGroup
* options={[
* { label: "Option 1", value: "option1" },
* { label: "Option 2", value: "option2" }
* ]}
* value={value}
* onChange={setValue}
* />
* ```
*
* @example
* ```tsx
* // Horizontal layout
* <RadioGroup
* direction="row"
* options={[
* { label: "Option 1", value: "option1" },
* { label: "Option 2", value: "option2" }
* ]}
* onChange={handleChange}
* />
* ```
*/
export declare const RadioGroup: <T extends string>({ options, onChange, className, direction, ...props }: RadioGroupProps<T>) => import("react").JSX.Element;