InputSwitch

InputSwitch is used to select a boolean value.

Basic

Preselection

Import via Module


import { InputSwitch } from 'primereact/inputswitch';

Import via CDN


<script src="https://unpkg.com/primereact/core/core.min.js"></script>
<script src="https://unpkg.com/primereact/inputswitch/inputswitch.min.js"></script>

Getting Started

InputSwitch is used as a controlled input with checked and onChange properties.


<InputSwitch checked={value} onChange={(e) => setValue(e.value)} />

Properties

Any valid attribute is passed to the root element implicitly, extended properties are as follows;

Name	Type	Default	Description
id	string	null	Unique identifier of the element.
style	string	null	Inline style of the element.
className	string	null	Style class of the element.
inputId	string	null	Identifier of the input element.
name	string	null	Name of the input element.
tabIndex	number	null	Index of the element in tabbing order.
checked	boolean	false	Specifies whether a inputswitch should be checked or not.
trueValue	any	true	Value in checked state.
falseValue	any	false	Value in unchecked state.
disabled	boolean	false	When present, it specifies that the component should be disabled.
tooltip	any	null	Content of the tooltip.
tooltipOptions	object	null	Configuration of the tooltip, refer to the tooltip documentation for more information.

Events

Name	Parameters	Description
onChange	event.originalEvent: Browser event event.value: Checked state as a boolean.	Callback to invoke on value change.
onFocus	event: Browser event.	Callback to invoke when the element receives focus.
onBlur	event: Browser event.	Callback to invoke when the element loses focus.