ToggleButton

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

Import #


import ToggleButton from 'primevue/togglebutton';

Basic #

Two-way binding to a boolean property is defined using the standard v-model directive.


<ToggleButton v-model="checked" />

Customized #

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

I reject


<ToggleButton v-model="checked1" onLabel="I confirm" offLabel="I reject"
    onIcon="pi pi-check" offIcon="pi pi-times" class="w-[9rem]" />

Disabled #

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


<ToggleButton v-model="checked" disabled onIcon="pi pi-check" offIcon="pi pi-times"
    class="w-full sm:w-[10rem]" aria-label="Confirmation" />

Invalid #

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

Yes


<ToggleButton v-model="checked1" onIcon="pi pi-check" offIcon="pi pi-times" class="w-full sm:w-[10rem]" aria-label="Confirmation" invalid />

Accessibility #

Screen Reader

ToggleButton component uses a hidden native checkbox element as the switch element internally that is only visible to 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" />

Keyboard Support

Keyboard interaction is derived from the native browser handling of checkboxs in a group.

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