RadioGroupProps

Represents the props of the KendoReact RadioGroup component.

Name	Type	Default	Description
ariaDescribedBy?	string		Identifies the element(s) which will describe the component, similar to HTML aria-describedby attribute. For example these elements could contain error or hint message. jsx <RadioGroup ariaDescribedBy="error-message" />
ariaLabelledBy?	string		Identifies the element(s) which will label the component. jsx <RadioGroup ariaLabelledBy="group-label" />
className?	string		Specifies a list of CSS classes that will be added to the RadioGroup element. jsx <RadioGroup className="custom-class" />
data?	RadioButtonProps[]		The collection of radio buttons that will be rendered in the RadioGroup (see example). jsx <RadioGroup data={[{ label: 'Option 1', value: 1 }, { label: 'Option 2', value: 2 }]} />
defaultValue?	any		Sets the default checked state of a radio button when used in uncontrolled mode (see example). The checked property is passed to the underlying input element. jsx <RadioGroup defaultValue={1} />
dir?	string		Represents the dir HTML attribute. This is used to switch from LTR to RTL. jsx <RadioGroup dir="rtl" />
disabled?	boolean		Disable all radio buttons (see example). jsx <RadioGroup disabled={true} />
id?	string		Specifies the value of the id attribute that will be added to the RadioGroup element. jsx <RadioGroup id="radio-group" />
item?	React.ComponentType<HTMLAttributes<HTMLLIElement>>		Overrides the default component responsible for visualizing a single item. The default element is li with a RadioButton as children. jsx <RadioGroup item={(props) => <li>{props.label}</li>} />
labelPlacement?	string		Sets the label position of the radio buttons. Accepts two options: before or after. Defaults to after. jsx <RadioGroup labelPlacement="before" />
layout?	"vertical" | "horizontal"		Specifies the radio group layout. jsx <RadioGroup layout="horizontal" />
name?	string		Specifies the name property of the input DOM elements. jsx <RadioGroup name="options" />
onChange?	(event: RadioGroupChangeEvent) => void		The event handler that will be fired when the changes the selected value. jsx <RadioGroup onChange={(event) => console.log(event.value)} />
onFocus?	(event: RadioGroupFocusEvent) => void		The event handler that will be fired when Radio button is focused. jsx <RadioGroup onFocus={(event) => console.log('Focused')} />
style?	React.CSSProperties		Sets additional CSS styles to the radio group. jsx <RadioGroup style={{ margin: '10px' }} />
valid?	boolean		Overrides the validity state of the component. If valid is set, the required property will be ignored. This property is part of the FormComponentProps interface. jsx <RadioGroup valid={false} />
value?	"null" | string | number		Sets the default checked state of a radio button when used in controlled mode (see example). The checked property is passed to the underlying input element. jsx <RadioGroup value={1} />