The QBtnToggle component is another basic element for user input, similar to QRadio but with buttons. You can use this to supply a way for the user to pick an option from multiple choices.
Usage
Basic
Design
Since QBtnToggle uses QBtn, you can use design related props of QBtn to style this component.
Custom content
First QBtnToggle below has tooltips on each button. Second QBtnToggle has customized the content. Notice the slot prop in the options Object definition. When you use this slot prop, you don’t necessary need the label / icon props in options.
Disable and readonly
You can either disable a QBtnToggle by providing a disable attribute, or disable an individual button by providing the property disable: true to its entry, in the options.
Native form submit
When dealing with a native form which has an action and a method (eg. when using Quasar with ASP.NET controllers), you need to specify the name property on QBtnToggle, otherwise formData will not contain it (if it should) - all value are converted to string (native behaviour, so do not use Object values):
Accessibility v2.25+
Each option renders as a button with aria-pressed reflecting whether it is the currently selected value, so screen readers announce the selection state. Give icon-only options an accessible name through the option’s attrs property (e.g. attrs: { 'aria-label': 'Justify left' }).
Note that QBtnToggle exposes no group semantics: the wrapping element carries no role or accessible name, and there is no arrow-key navigation between options — each enabled option is its own Tab stop.