New to KendoReact? Start a free 30-day trial

RadioGroupProps

Interface

Represents the props of the KendoReact RadioGroup component.

Definition

Package:@progress/kendo-react-inputs

Properties

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.

Example:

jsx

<RadioGroup ariaDescribedBy="error-message" />

ariaLabelledBy?

string

Identifies the element(s) which will label the component.

Example:

jsx

<RadioGroup ariaLabelledBy="group-label" />

className?

string

Specifies a list of CSS classes that will be added to the RadioGroup element.

Example:

jsx

<RadioGroup className="custom-class" />

data?

RadioButtonProps[]

The collection of radio buttons that will be rendered in the RadioGroup (see example).

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.

Example:

jsx

<RadioGroup defaultValue={1} />

dir?

string

Represents the dir HTML attribute. This is used to switch from LTR to RTL.

Example:

jsx

<RadioGroup dir="rtl" />

disabled?

boolean

Disable all radio buttons (see example).

Example:

jsx

<RadioGroup disabled={true} />

id?

string

Specifies the value of the id attribute that will be added to the RadioGroup element.

Example:

jsx

<RadioGroup id="radio-group" />

item?

ComponentType<HTMLAttributes<HTMLLIElement>>

Overrides the default component responsible for visualizing a single item.

The default element is li with a RadioButton as children.

Example:

jsx

<RadioGroup item={(props) => <li>{props.children}</li>} />

labelPlacement?

string

Sets the label position of the radio buttons. Accepts two options: before or after. Defaults to after.

Example:

jsx

<RadioGroup labelPlacement="before" />

layout?

"horizontal" | "vertical"

Specifies the radio group layout.

Example:

jsx

<RadioGroup layout="horizontal" />

name?

string

Specifies the name property of the input DOM elements.

Example:

jsx

<RadioGroup name="options" />

onChange?

(event: RadioGroupChangeEvent) => void

The event handler that will be fired when the changes the selected value.

Parameters:eventRadioGroupChangeEvent

Example:

jsx

<RadioGroup onChange={(event) => console.log(event.value)} />

onFocus?

(event: RadioGroupFocusEvent) => void

The event handler that will be fired when Radio button is focused.

Parameters:eventRadioGroupFocusEvent

Example:

jsx

<RadioGroup onFocus={(event) => console.log('Focused')} />

style?

CSSProperties

Sets additional CSS styles to the radio group.

Example:

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.

Example:

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.

Example:

jsx

<RadioGroup value={1} />