VOOZH about

URL: https://quasar.dev/vue-components/button-toggle/

⇱ Button Toggle | Quasar Framework


assignment_late
Why donate
travel_explore
API Explorer
build
Quasar CLI (with Vite)
Upgrade Guide
Creating a New Project
The /quasar.config File
Convert q/app-webpack Project
Browser Compatibility
TypeScript Support
Directory Structure
Commands List
CSS Preprocessors
Page Routing with VueRouter
Lazy Loading - Code Splitting
Handling Assets
Boot Files
Prefetch Feature
API Proxying
Handling Vite
Handling import.meta.env
State Management with Pinia
Lint and Format Code
Testing & Auditing
Developing Mobile Apps
Ajax Requests
Opening Dev Server To Public
build
Quasar CLI (with Webpack)
Button Toggle

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.

Loading QBtnToggle API...

Usage

Basic

Basic


Design

TIP

Since QBtnToggle uses QBtn, you can use design related props of QBtn to style this component.

Some design examples


Spread horizontally


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.

Custom buttons content


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.

Disable and readonly


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):

Native form



Caught a mistake?Edit this page in browser
1. Introduction
2. QBtnToggle API
3. Usage
3.1. Basic
3.2. Design
3.3. Custom content
3.4. Disable and readonly
3.5. Native form submit
Copyright © 2015-present PULSARDEV SRL, Razvan Stoenescu