@eds/radio

v4.0.22

Radio

A control that allows the user to select a single value from multiple options.

Radio

Prop	Required	Description	Type
`children`	—	The radio label content.	string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| ReactPortal \| { key?: string \| number; ref?: null; props?: { children?: boolean \| ReactChild \| ReactPortal \| StrictReactFragment; }; } \| (boolean \| ReactChild \| ReactPortal \| StrictReactFragment)[] \| string & ReactElement<any, string \| JSXElementConstructor<any>> \| string & Iterable<ReactNode> \| string & ReactPortal \| number & ReactElement<any, string \| JSXElementConstructor<any>> \| number & Iterable<ReactNode> \| number & ReactPortal \| false & ReactElement<any, string \| JSXElementConstructor<any>> \| false & Iterable<ReactNode> \| false & ReactPortal \| true & ReactElement<any, string \| JSXElementConstructor<any>> \| true & Iterable<ReactNode> \| true & ReactPortal \| ReactElement<any, string \| JSXElementConstructor<any>> & string \| ReactElement<any, string \| JSXElementConstructor<any>> & number \| ReactElement<any, string \| JSXElementConstructor<any>> & false \| ReactElement<any, string \| JSXElementConstructor<any>> & true \| ReactElement<any, string \| JSXElementConstructor<any>> & Iterable<ReactNode> \| ReactElement<any, string \| JSXElementConstructor<any>> & ReactPortal \| ReactPortal & string \| ReactPortal & number \| ReactPortal & false \| ReactPortal & true \| ReactPortal & ReactElement<any, string \| JSXElementConstructor<any>> \| ReactPortal & Iterable<ReactNode> \| { key?: string \| number; ref?: null; props?: { children?: boolean \| ReactChild \| ReactPortal \| StrictReactFragment; }; } & string \| { key?: string \| number; ref?: null; props?: { children?: boolean \| ReactChild \| ReactPortal \| StrictReactFragment; }; } & number \| { key?: string \| number; ref?: null; props?: { children?: boolean \| ReactChild \| ReactPortal \| StrictReactFragment; }; } & false \| { key?: string \| number; ref?: null; props?: { children?: boolean \| ReactChild \| ReactPortal \| StrictReactFragment; }; } & true \| { key?: string \| number; ref?: null; props?: { children?: boolean \| ReactChild \| ReactPortal \| StrictReactFragment; }; } & ReactElement<any, string \| JSXElementConstructor<...>> \| { key?: string \| number; ref?: null; props?: { children?: boolean \| ReactChild \| ReactPortal \| StrictReactFragment; }; } & Iterable<ReactNode> \| { key?: string \| number; ref?: null; props?: { children?: boolean \| ReactChild \| ReactPortal \| StrictReactFragment; }; } & ReactPortal \| (boolean \| ReactChild \| ReactPortal \| StrictReactFragment)[] & string \| (boolean \| ReactChild \| ReactPortal \| StrictReactFragment)[] & number \| (boolean \| ReactChild \| ReactPortal \| StrictReactFragment)[] & false \| (boolean \| ReactChild \| ReactPortal \| StrictReactFragment)[] & true \| (boolean \| ReactChild \| ReactPortal \| StrictReactFragment)[] & ReactElement<any, string \| JSXElementConstructor<any>> \| (boolean \| ReactChild \| ReactPortal \| StrictReactFragment)[] & Iterable<ReactNode> \| (boolean \| ReactChild \| ReactPortal \| StrictReactFragment)[] & ReactPortal
`value`	—	The value of the radio.	string
`size`	—	Size options for the radio. Defaults to medium.	"small" \| "medium"

RadioGroup

Prop	Required	Description	Type
`children`	✅	The Radio components, each with a unique value.	string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| ReactPortal \| { key?: string \| number; ref?: null; props?: { children?: boolean \| ReactChild \| ReactPortal \| StrictReactFragment; }; } \| (boolean \| ReactChild \| ReactPortal \| StrictReactFragment)[]
`value`	✅	Value of the nested Radio components.	string
`onInputChange`	✅	Callback fired when a nested radio is selected.	(selectedValue: string) => void
`invalid`	—	The current validity state of the input. Defaults to false.	boolean
`message`	—	Feedback about the input's current state. Renders in critical color if invalid is true, otherwise it defaults to positive color.	string
`keepSpaceForMessage`	—	To prevent a jarring experience when the message appears after validation, this keeps the vertical rhythm consistent when used in a form with other fields. Defaults to true.	boolean
`disabled`	—	Disables the nested Radio components.	boolean
`name`	—	Name for the group of Radio components.	string
`horizontal`	—	Make the children stack horizontally. Defaults to false.	boolean
`size`	—	Control the input size of the nested Radio components.	"small" \| "medium"
`id`	—	A base ID for extending to the container element and message.	string

RadioPrimitive

Prop	Required	Description	Type
`children`	—	The radio label content.	string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| ReactPortal \| { key?: string \| number; ref?: null; props?: { children?: boolean \| ReactChild \| ReactPortal \| StrictReactFragment; }; } \| (boolean \| ReactChild \| ReactPortal \| StrictReactFragment)[] \| string & ReactElement<any, string \| JSXElementConstructor<any>> \| string & ReactPortal \| string & { key?: string \| number; ref?: null; props?: { children?: boolean \| ReactChild \| ReactPortal \| StrictReactFragment; }; } \| string & (boolean \| ReactChild \| ReactPortal \| StrictReactFragment)[] \| number & ReactElement<any, string \| JSXElementConstructor<any>> \| number & ReactPortal \| number & { key?: string \| number; ref?: null; props?: { children?: boolean \| ReactChild \| ReactPortal \| StrictReactFragment; }; } \| number & (boolean \| ReactChild \| ReactPortal \| StrictReactFragment)[] \| false & ReactElement<any, string \| JSXElementConstructor<any>> \| false & ReactPortal \| false & { key?: string \| number; ref?: null; props?: { children?: boolean \| ReactChild \| ReactPortal \| StrictReactFragment; }; } \| false & (boolean \| ReactChild \| ReactPortal \| StrictReactFragment)[] \| true & ReactElement<any, string \| JSXElementConstructor<any>> \| true & ReactPortal \| true & { key?: string \| number; ref?: null; props?: { children?: boolean \| ReactChild \| ReactPortal \| StrictReactFragment; }; } \| true & (boolean \| ReactChild \| ReactPortal \| StrictReactFragment)[] \| ReactElement<any, string \| JSXElementConstructor<any>> & string \| ReactElement<any, string \| JSXElementConstructor<any>> & number \| ReactElement<any, string \| JSXElementConstructor<any>> & false \| ReactElement<any, string \| JSXElementConstructor<any>> & true \| ReactElement<any, string \| JSXElementConstructor<any>> & ReactPortal \| ReactElement<any, string \| JSXElementConstructor<any>> & { key?: string \| number; ref?: null; props?: { children?: boolean \| ReactChild \| ReactPortal \| StrictReactFragment; }; } \| ReactElement<any, string \| JSXElementConstructor<any>> & (boolean \| ReactChild \| ReactPortal \| StrictReactFragment)[] \| Iterable<ReactNode> & string \| Iterable<ReactNode> & number \| Iterable<ReactNode> & false \| Iterable<ReactNode> & true \| Iterable<ReactNode> & ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> & ReactPortal \| Iterable<ReactNode> & { key?: string \| number; ref?: null; props?: { children?: boolean \| ReactChild \| ReactPortal \| StrictReactFragment; }; } \| Iterable<ReactNode> & (boolean \| ReactChild \| ReactPortal \| StrictReactFragment)[] \| ReactPortal & string \| ReactPortal & number \| ReactPortal & false \| ReactPortal & true \| ReactPortal & ReactElement<any, string \| JSXElementConstructor<any>> \| ReactPortal & { key?: string \| number; ref?: null; props?: { children?: boolean \| ReactChild \| ReactPortal \| StrictReactFragment; }; } \| ReactPortal & (boolean \| ReactChild \| ReactPortal \| StrictReactFragment)[]
`value`	—	The value of the radio.	string
`size`	—	Size options for the radio. Defaults to medium.	"small" \| "medium"