import ToggleButton from 'primevue/togglebutton';
<script src="https://unpkg.com/primevue@^3/core/core.min.js"></script>
<script src="https://unpkg.com/primevue@^3/togglebutton/togglebutton.min.js"></script>
Two-way binding to a boolean property is defined using the standard v-model directive.
<ToggleButton v-model="checked" />
As model is two-way binding enabled, setting the bound value as true displays the state as checked.
export default {
data() {
return {
checked: true
}
}
}
Icons and Labels can be customized using onLabel, offLabel, onIcon and offIcon properties.
<ToggleButton v-model="checked" onLabel="I confirm" offLabel="I reject" onIcon="pi pi-check" offIcon="pi pi-times" />
Any valid attribute is passed to the root element implicitly, extended properties are as follows;
| Name | Type | Default | Description |
|---|---|---|---|
| modelValue | any | null | Value of the component. |
| onIcon | string | null | Icon for the on state. |
| offIcon | string | null | Icon for the off state. |
| onLabel | string | yes | Label for the on state. |
| offLabel | string | no | Label for the off state. |
| iconPos | string | left | Position of the icon, valid values are "left" and "right". |
| disabled | boolean | false | When present, it specifies that the component should be disabled. |
| tabindex | number | null | Index of the element in tabbing order. |
| inputId | string | null | Style class of the component input field. |
| inputClass | string | null | Style class of the input field. |
| inputStyle | any | null | Inline style of the input field. |
| inputProps | object | null | Uses to pass all properties of the HTMLInputElement to the focusable input element inside the component. |
| aria-label | string | null | Defines a string value that labels an interactive element. |
| aria-labelledby | string | null | Establishes relationships between the component and label(s) where its value should be one or more element IDs. |
| Name | Parameters | Description |
|---|---|---|
| change | event: Browser event | Callback to invoke on value change. |
| focus | event: Browser event | Callback to invoke when the component receives focus. |
| blur | event: Browser event | Callback to invoke when the component loses focus. |
Following is the list of structural style classes, for theming classes visit
| Name | Element |
|---|---|
| p-togglebutton | Container element |
| p-button-icon | Icon element. |
| p-button-text | Label element. |
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 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. |
None.