Source: https://primereact.org/inputswitch/

Introducing PrimeReact v11 Alpha 🥁Learn More

SearchK
10.9.7
FEATURES
API
THEMING
PASS THROUGH

InputSwitch

InputSwitch is used to select a boolean value.

Import#

import { InputSwitch } from 'primereact/inputswitch';

Copy

Basic#

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

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

Copy

Preselection#

Enabling checked property displays the component as active initially.

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

Copy

Invalid#

Invalid state style is added using the p-invalid class to indicate a failed validation.

<InputSwitch className="p-invalid" />

Copy

Disabled#

When disabled is present, the element cannot be edited and focused.

<InputSwitch disabled />

Copy

Accessibility#

Screen Reader

InputSwitch component uses a hidden native checkbox element with switch role internally that is only visible to screen readers. Value to describe the component can either be provided via label tag combined with inputId prop or using aria-labelledby, aria-label props.

<label htmlFor="switch1">Remember Me</label>
<InputSwitch inputId="switch1" />

<span id="switch2">Remember Me</span>
<InputSwitch aria-labelledby="switch2" />

<InputSwitch aria-label="Remember Me" />

Copy

Keyboard Support

| Key | Function | | --- | --- | | tab | Moves focus to the switch. | | space | Toggles the checked state. |

Import
Basic
Preselection
Invalid
Disabled
Accessibility

PrimeReact 10.9.7 by PrimeTek