SwitchProps

Represents the props of the KendoReact Switch component.

Name	Type	Default	Description
accessKey?	string		Specifies the accessKey of the Switch. 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. jsx <Switch ariaDescribedBy="description-id" />
ariaLabel?	string		Specifies the accessible label of the Switch. jsx <Switch ariaLabel="Toggle switch" />
ariaLabelledBy?	string		Identifies the element(s) which will label the component. jsx <Switch ariaLabelledBy="label-id" />
checked?	boolean		Sets the current value of the Switch (see example). jsx <Switch checked={true} />
className?	string		Adds custom CSS classes to the Switch. jsx <Switch className="custom-class" />
defaultChecked?	boolean		Sets the value of the Switch when it is initially displayed (see example). jsx <Switch defaultChecked={true} />
defaultValue?	any		Specifies the default value of the Switch. jsx <Switch defaultValue={true} />
dir?	string		Specifies the dir property of the wrapping element of the Switch. jsx <Switch dir="rtl" />
disabled?	boolean		Disables the Switch when set to true (see example). jsx <Switch disabled={true} />
id?	string		Specifies the id of the Switch. 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?	React.ReactNode		Sets a custom label for the Off state. jsx <Switch offLabel="No" />
onBlur?	(event: FocusEvent<HTMLSpanElement>) => void		Fires when the Switch is blurred. jsx <Switch onBlur={(event) => console.log('Blurred')} />
onChange?	(event: SwitchChangeEvent) => void		Fires when the value of the Switch changes. jsx <Switch onChange={(event) => console.log(event.value)} />
onFocus?	(event: FocusEvent<HTMLSpanElement>) => void		Fires when the Switch is focused. jsx <Switch onFocus={(event) => console.log('Focused')} />
onLabel?	React.ReactNode		Sets a custom label for the On state. jsx <Switch onLabel="Yes" />
required?	boolean		Specifies if null is a valid value for the component. This property is part of the FormComponentProps interface.
size?	"null" | "small" | "large" | "medium"	medium	Configures the size of the Switch. The available options are: small medium large null—Does not set a size className. jsx <Switch size="large" />
tabIndex?	number		Specifies the tabIndex of the component. jsx <Switch tabIndex={0} />
thumbRounded?	"null" | "small" | "large" | "medium" | "full"		Configures the thumbRounded property of the Switch. The available options are: small medium large full null—Does not set a thumbRounded className. jsx <Switch thumbRounded="full" />
trackRounded?	"null" | "small" | "large" | "medium" | "full"	full	Configures the trackRounded of the Switch. The available options are: small medium large full null—Does not set a trackRounded className. 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. jsx <Switch value={true} />