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

Use the icon template to customize what the component displays based on its internal state.

ToggleButton provides small and large sizes as alternatives to the base.

The invalid state is applied using the invalid property to indicate failed validation, which can be integrated with form validation.

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

The fluid prop makes the component take up the full width of its container when set to true.

ToggleButton integrates seamlessly with the PrimeVue Forms library.

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.

Keyboard Support