New to KendoReactStart a free 30-day trial

SwitchProps

Interface

Represents the props of the KendoReact Switch component.

Definition

Package:@progress/kendo-react-inputs

Properties

Specifies the accessKey of the Switch.

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

Specifies the accessible label of the Switch.

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

checked?

boolean

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

Adds custom CSS classes to the Switch.

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

Specifies the default value of the Switch.

dir?

string

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

disabled?

boolean

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

id?

string

Specifies the id of the Switch.

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.

onBlur?

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

Fires when the Switch is blurred.

Parameters:eventFocusEvent​<HTMLSpanElement, Element>

Fires when the value of the Switch changes.

Parameters:eventSwitchChangeEvent

onFocus?

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

Fires when the Switch is focused.

Parameters:eventFocusEvent​<HTMLSpanElement, Element>

onLabel?

ReactNode

Sets a custom label for the On state.

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)

tabIndex?

number

Specifies the tabIndex of the component.

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)

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)

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.

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.

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.

webMcp?

boolean | WebMcpProps

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