Source: https://primereact.org/togglebutton/

Introducing PrimeReact v11 Alpha 🥁Learn More

SearchK
10.9.7
FEATURES
API
THEMING
PASS THROUGH

ToggleButton

ToggleButton is used to select a boolean value using a button.

Import#

import { ToggleButton } from 'primereact/togglebutton';

Copy

Basic#

ToggleButton is used a controlled input component with value and onChange properties.

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

Copy

Customized#

Icons and Labels can be customized using onLabel, offLabel, onIcon and offIcon properties.

I reject

<ToggleButton onLabel="I confirm" offLabel="I reject" onIcon="pi pi-check" offIcon="pi pi-times" 
    checked={checked} onChange={(e) => setChecked(e.value)} />

Copy

Invalid#

Invalid state is displayed using the invalid prop to indicate a failed validation. You can use this style when integrating with form validation libraries.

<ToggleButton invalid onIcon="pi pi-check" offIcon="pi pi-times" checked={checked} onChange={(e) => setChecked(e.value)} />

Copy

Disabled#

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

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

Copy

Accessibility#

Screen Reader

ToggleButton component uses an element with button role and updates aria-pressed state for screen readers. Value to describe the component can be defined with aria-labelledby or aria-label props, it is highly suggested to use either of these props as the component changes the label displayed which will result in screen readers to read different labels when the component receives focus. To prevent this, always provide an aria label that does not change related to state.

<span id="rememberme">Remember Me</span>
<ToggleButton aria-labelledby="rememberme" />

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

Copy

Keyboard Support

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

Import
Basic
Customized
Invalid
Disabled
Accessibility

PrimeReact 10.9.7 by PrimeTek