New to KendoReact? Start a free 30-day trial

SwitchProps

Interface

Represents the props of the KendoReact Switch component.

Definition

Package:@progress/kendo-react-inputs

Properties

accessKey?

string

Specifies the accessKey of the Switch.

Example:

jsx

<Switch accessKey="s" />

ariaDescribedBy?

string

Identifies the element(s) which will describe the component. For example these elements could contain error or hint message.

Example:

jsx

<Switch ariaDescribedBy="description-id" />

ariaLabel?

string

Specifies the accessible label of the Switch.

Example:

jsx

<Switch ariaLabel="Toggle switch" />

ariaLabelledBy?

string

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

Example:

jsx

<Switch ariaLabelledBy="label-id" />

checked?

boolean

Sets the current value of the Switch (see example).

Example:

jsx

<Switch checked={true} />

className?

string

Adds custom CSS classes to the Switch.

Example:

jsx

<Switch className="custom-class" />

defaultChecked?

boolean

Sets the value of the Switch when it is initially displayed (see example).

Example:

jsx

<Switch defaultChecked={true} />

defaultValue?

any

Specifies the default value of the Switch.

Example:

jsx

<Switch defaultValue={true} />

dir?

string

Specifies the dir property of the wrapping element of the Switch.

Example:

jsx

<Switch dir="rtl" />

disabled?

boolean

Disables the Switch when set to true (see example).

Example:

jsx

<Switch disabled={true} />

id?

string

Specifies the id of the Switch.

Example:

jsx

<Switch id="switch-component" />

name?

string

Specifies the name property of the input DOM element.

This property is part of the FormComponentProps interface.

offLabel?

ReactNode

Sets a custom label for the Off state.

Example:

jsx

<Switch offLabel="No" />

onBlur?

(event: FocusEvent<HTMLSpanElement, Element>) => void

Fires when the Switch is blurred.

Parameters:eventFocusEvent<HTMLSpanElement, Element>

Example:

jsx

<Switch onBlur={(event) => console.log('Blurred')} />

onChange?

(event: SwitchChangeEvent) => void

Fires when the value of the Switch changes.

Parameters:eventSwitchChangeEvent

Example:

jsx

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

onFocus?

(event: FocusEvent<HTMLSpanElement, Element>) => void

Fires when the Switch is focused.

Parameters:eventFocusEvent<HTMLSpanElement, Element>

Example:

jsx

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

onLabel?

ReactNode

Sets a custom label for the On state.

Example:

jsx

<Switch onLabel="Yes" />

readOnly?

boolean

Makes the Switch read-only when set to true. The Switch will remain focusable but its value cannot be changed by the user.

Example:

jsx

<Switch readOnly={true} />

required?

boolean

Specifies if null is a valid value for the component.

This property is part of the FormComponentProps interface.

size?

"small" | "medium" | "large"

Configures the size of the Switch.

The available options are:

small
medium
large
null—Does not set a size className.

Default:

undefined (theme-controlled)

Example:

jsx

<Switch size="large" />

tabIndex?

number

Specifies the tabIndex of the component.

Example:

jsx

<Switch tabIndex={0} />

thumbRounded?

"small" | "medium" | "large" | "none" | "full"

Configures the thumbRounded property of the Switch.

The available options are:

small
medium
large
full
null—Does not set a thumbRounded className.

Default:

undefined (theme-controlled)

Example:

jsx

<Switch thumbRounded="full" />

trackRounded?

"small" | "medium" | "large" | "none" | "full"

Configures the trackRounded of the Switch.

The available options are:

small
medium
large
full
null—Does not set a trackRounded className.

Default:

undefined (theme-controlled)

Example:

jsx

<Switch trackRounded="medium" />

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.

validationMessage?

string

Controls the form error message of the component. If set to an empty string, no error will be thrown.

This property is part of the FormComponentProps interface.

validityStyles?

boolean

If set to false, no visual representation of the invalid state of the component will be applied.

This property is part of the FormComponentProps interface.

value?

null | string | number | boolean | string[]

Specifies the value of the Switch.

Example:

jsx

<Switch value={true} />

webMcp?

boolean | WebMcpProps

Enables Web MCP tool registration for this component. Requires a parent WebMcpProvider from @progress/kendo-react-webmcp.