# Switch The `Switch` allows the user to make a basic "Yes or No" decision, i.e. it represents an input for a boolean value. This is useful either as part of a form, or as a stand-alone toggle for basic filters for tables and similar use cases.

### Properties The `Switch` component offers the following configuration properties.

Property	Type	Default value	Behavior
Default value	`boolean`	`false`	Determines whether the initial state of the switch should be active or not. If used with dynamic JavaScript expressions, this can reactively update the toggle based on specific conditions.
Disabled	`boolean`	`false`	Whether the switch should be disabled or not. When disabled, the input is greyed out and cannot be toggled.
Label	`stringWithJs`	`'Switch'`	Label that is rendered next to the toggle element.
Label alignment	`'left' \| 'center' \| 'right'`	`'left'`	Text alignment of the label.
Label position	`'left' \| 'right'`	`'left'`	Determines whether the toggle should be placed to the left of the label or to the right.
Required	`boolean`	`false`	Determines how the switch behaves as part of a form during submit. When set to `true`, the surrounding form submit fails with a validation error in case the switch is not activated.
Toggle with label click	`boolean`	`false`	Determines whether the switch can be toggled only by clicking the toggle directly (`false`), or also by clicking on the label (`true`)

### Events The `Switch` offers three events, that are all related to the UI event when the switch is toggled: * **On change**: This event is triggered whenever the switch is toggled, regardless whether activated or deactivated. * **On false**: This event is triggered whenever the switch is deactivated. This is equivalent to an action running at "On change", with a condition like `if (!mySwitch.value) { ... }` inside. * **On true**: This event is triggered whenever the switch is activated. This is equivalent to an action running at "On change", with a condition like `if (mySwitch.value) { ... }` inside. ### API The `Switch` exposes the following API in the JavaScript runtime environment.

Property / Function	Type	Behavior
`clear()`	`() => void`	Resets the switch to inactive (`value` being `false`)
`disabled`	`boolean`	Current boolean value of the "Disabled" property.
`label`	`string`	Current string value of the "Label" property.
`reset()`	`() => void`	Resets the switch similar to the `clear()` function, however not always to `false`, but to the value of the "Default value" property. This is usually used to reset a form to a default state, instead of completely clearing it.
`setDisabled(value)`	`(value: boolean) => void`	Sets the value of the "Disabled" property to the provided boolean value.
`setLabel(value)`	`(value: string) => void`	Sets the value of the "Label" property to the provided string value.
`setValue(value)`	`(value: boolean) => void`	Sets the toggle-state to the provided boolean value. This does not trigger any events.
`value`	`boolean`	Current boolean value representing the toggle-state of the switch. Will return `true` if active, and `false` if inactive.

--- # 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.uify.io/component-reference/switch.md?ask= ``` 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.