# Switch

(part of package '[Bootstrap Extra Components](/reference/servoyextensions/packages/ui-component-packages/bootstrap-extra-components.md)')\
Extends designtime/SolutionModel: [JSWebComponent](/reference/servoycore/dev-api/solutionmodel/jswebcomponent.md)\
Extends runtime: [RuntimeWebComponent](/reference/servoycore/dev-api/forms/runtimeform/elements/runtimewebcomponent.md)

A component that represents a switch toggle.

This is a reference page; many components have detailed usage guides [here](https://docs.servoy.com/guides/develop/application-design/ui-components).

## Properties

### animate

Flag indicating whether animation is enabled for the switch transitions. Type: [Boolean](/reference/servoycore/dev-api/js-lib/boolean.md) Default Value: true

***

### componentSize

The overall size configuration of the switch component. Type: [Tagstring](/reference/servoy-developer/component_and_service_property_types.md#tagstring) Default Value: "Normal"

***

### dataProviderID

Bound data provider identifier for the switch value. Type: [Dataprovider](/reference/servoy-developer/component_and_service_property_types.md#dataprovider)

***

### enabled

Flag indicating whether the switch is enabled for user interaction. Type: [Enabled](/reference/servoy-developer/component_and_service_property_types.md#protected) Default Value: true

***

### handleWidth

Width of the switch handle in pixels. Type: [Tagstring](/reference/servoy-developer/component_and_service_property_types.md#tagstring) Default Value: "150"

***

### label

The label text displayed adjacent to the switch. Type: [Tagstring](/reference/servoy-developer/component_and_service_property_types.md#tagstring) Default Value: "Switch"

***

### labelWidth

Width of the label in pixels. Type: [Tagstring](/reference/servoy-developer/component_and_service_property_types.md#tagstring) Default Value: "150"

***

### offColor

Color used for the switch when in the "off" state. Type: [Tagstring](/reference/servoy-developer/component_and_service_property_types.md#tagstring) Default Value: "primary"

***

### offText

Text displayed when the switch is in the "off" state. Type: [Tagstring](/reference/servoy-developer/component_and_service_property_types.md#tagstring) Default Value: "Off"

***

### onColor

Color used for the switch when in the "on" state. Type: [Tagstring](/reference/servoy-developer/component_and_service_property_types.md#tagstring) Default Value: "primary"

***

### onText

Text displayed when the switch is in the "on" state. Type: [Tagstring](/reference/servoy-developer/component_and_service_property_types.md#tagstring) Default Value: "On"

***

### styleClass

CSS style classes applied to the switch component. Type: [Styleclass](/reference/servoy-developer/component_and_service_property_types.md#styleclass) Default Value: "switch"

***

### tabSeq

Tab sequence order for keyboard navigation. Type: [Tabseq](/reference/servoy-developer/component_and_service_property_types.md#tabseq)

***

### visible

Flag indicating whether the switch is visible. Type: [Visible](/reference/servoy-developer/component_and_service_property_types.md#visible)

***

## Events

### onActionMethodID(event)

Fired when the switch is toggled.

**Parameters:**

> * {[JSEvent](/reference/servoycore/dev-api/application/jsevent.md)} event The event object containing details about the toggle action.

***

### onDataChangeMethodID(oldValue,newValue,event)

Handle changed data, return false if the value should not be accepted.\
JSEvent.data will contain extra information about dataproviderid, its scope and the scope id (record datasource or form/global variable scope) - present since 2021.06 release

**Parameters:**

> * {[${dataproviderType}](/reference/servoy-developer/component_and_service_property_types.md#dataprovider)} oldValue The previous switch value.
> * {[${dataproviderType}](/reference/servoy-developer/component_and_service_property_types.md#dataprovider)} newValue The new switch value to be set.
> * {[JSEvent](/reference/servoycore/dev-api/application/jsevent.md)} event The event object associated with the data change.

**Returns:** {[Boolean](/reference/servoycore/dev-api/js-lib/boolean.md)}

***

## API

### requestFocus()

Request the focus to this switch.

**Example:**

```js
myElement.requestFocus();
```

***

***


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.servoy.com/reference/servoyextensions/ui-components/input-control/switch.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.