Toggle Field

BsToggleField is a form field component with a group of buttons with toggle capabilities, and validation. It is primarily used to visualize choices with different approach.

Overview

BsToggleField component internally uses BsToggleButton but with validation capabilities. This means the component shares the same style variants as BsToggleButton.

BsToggleField component mimics the HTML5 <input> element. This means that you can add attributes like required, readonly, or disabled and it will react to them to give the best experience. You can also use v-model directive to create two-way data bindings on the model-value property. This is useful to control or maintain the model-value property.

Updated on v2.0.0

What are you drinking?

Normal State

TeaCoffeeBeer

Readonly State

TeaCoffeeBeer

Disabled State

TeaCoffeeBeer

IMPORTANT

• The <bs-field-toggle-field> tag still works, but has been deprecated since v2.0.0.
• Never assign a datasource to multiple <bs-toggle-field>. It may cause a bug or duplicate ID attribute.

TIP

Any MDBootstrap Color variants and Material Color variants can be applied to the color property.

Checked Icon

With the help of slot icon you can add dynamic checked icon.

Added since v2.0.1

Favorite Drink

TeaCoffeeBeer

Multiple Selection

BsToggleField also support multiple selection mode. Use and define the multiple property explicitly to enable multiple selection mode.

Favorite Drink

TeaCoffeeBeer

Favorite Coffee

AmericanoEspressoCappuccino

Style Variants

You can style the <bs-toggle-field> component to your own preference or use a style variant based on Google Material Design 3 specifications. Example below show various built-in style variants and demonstrate how to put an icon inside the <bs-toggle-field> and change the icon dynamically like a segmented buttons behaves.

Updated on v2.0.1

How is the weather today?

Filled

SunnyRainyHeavy Rain

Filled Elevated

SunnyRainyHeavy Rain

Filled Tonal

SunnyRainyHeavy Rain

Outlined

SunnyRainyHeavy Rain

Flat

SunnyRainyHeavy Rain

Combination

How is the weather today?

Filled Round

SunnyRainyHeavy Rain

Filled Rectangle

SunnyRainyHeavy Rain

Filled Round Tonal

SunnyRainyHeavy Rain

Outlined Round

SunnyRainyHeavy Rain

Flat Round

SunnyRainyHeavy Rain

INFO

Since Vue MDBootstrap v2.1.0, Google Material Icons are replaced with Google Material Symbols.

Help Text

The help-text property on <bs-toggle-field> adds the provided string beneath the Toggle Field. And sets the persistent-help-text property to false to make the help text visible when the Toggle Field is focused or hovered.

Persistent help text

Wheather Today

SunnyRainyHeavy Rain

Select a wheather for today

Non-persistent help text

Favorite Coffee

AmericanoEspressoCappuccino

Usage Example

The following is an example that demonstrate more advanced use of the <bs-toggle-field> with form validation.

Survey Form

Your Name

Email Address

Favorite Drink:

TeaCoffeeBeer

Occupation:

Computer and IT

Scientists and Research

Consultant

Other

By submitting your information, you agree to our Term & Conditions and Privacy Policy.

CSS Variables

The component css variables inherited from BsButton css variables.

Added since v2.0.0

API Reference

Property	Type	Default	Description
color	String	'default'	The component color appearance. Any MDBootstrap Color variants and Material Color variants can be used.
disabled	Boolean	false	The component state.
external-validator deprecated	TValidator		Use validator instead.
flat	Boolean	false	Enable flat toggle button style.
help-textc	String		The help text to display below the field component.
icon-position	String	'left'	The icon placement. Valid values are: left (before text), right (after text).
id	String		Sets the component ID. This property value is auto generate.
items	TInputOptionItem[]		Collection of input item properties.
model-value v-model	String/Number/Array		Value monitored by v-model that represents the selected value. v2.0.0
multiple	Boolean	false	Enable multiple selection mode. The default is single selection mode.
name	String		The <input> element name.
outlined	Boolean	false	Enable outlined toggle button style.
persistent-help-text	Boolean	true	Keeps help text visible when the component is not focused.
pill	Boolean	true	Enable rounded-pill toggle button style. v2.0.0
raised	Boolean	false	Enable elevated toggle button style.
readonly	Boolean	false	The component state.
rounded	Boolean	false	Enable rounded toggle button style. v2.0.0
size	String		Create the component with predefined size. Valid values are: xs, sm, lg.
toggle-color	String		The selected button color (optional). Any MDBootstrap Color variants and Material Color variants can be used.
tonal	Boolean	false	Enable filled tonal toggle button style. v2.0.4
validator	TValidator		The configuration options to integrate external validator plugin to validate this field value. v2.0.0

Name	Arguments	Description
update:model-value	( value:String/Number/Boolean/Array)	Used to update the model-value property. v2.0.0

Name	Arguments	Description
icon	( item:TInputOptionItem)	The outlet slot used to place custom icon. v2.0.1
label	( item:TInputOptionItem)	The outlet slot used to place custom label. v2.0.1

TInputOptionItem

The Input item has properties as described below:

Property	Type	Description
value required	String/Number/Boolean	The item value.
label required	String	The item label.
id	String	Html <input> element ID.
name	String	Html <input> element name. It is used when multiple is true.
disabled	Boolean	Html <input> element state.
readonly	Boolean	Html <input> element state.
icon	String	The icon to display inside the button. Updated on v2.1.0 Use any valid android icon name from Google Material Symbols with or without a suffix. Valid suffixes are: _outlined, _rounded, _sharp, _filled, _outlined_filled, _rounded_filled, and _sharp_filled. Suffix will take precedence over iconVariant property.
iconFlip	String	Flip the icon. Valid values are: horizontal, vertical, both.
iconPulse	Boolean	Apply pulse animation to the icon.
iconSize	Number	Render the icon at predefined size in pixel.
iconSpin	Boolean	Apply spin animation to the icon.
iconRotation	Number	Rotate the icon. Valid values are: 90, 180, 270.
iconVariant	String	Use predefined icon style variant. Valid values are: outlined, rounded, sharp, filled, outlined_filled, rounded_filled, and sharp_filled. v2.1.0

TValidator

The validator configuration option has properties as described below:

Property	Type	Description
validators	Record<String,Boolean>	External validator plugin validation result.
messages	Record<String,String>	Validation message for each validation types.
hasError	Boolean	An indicator that tells the field value pass the validation or not.
dirty	Boolean	Value comes from validator plugin that indicate the field is dirty or not.

All properties are mandatory.

NOTE

Vue MDBootstrap does not include form validation by default, we leave that up to the 3rd party form validation plugin. As of now, Vuelidate has been fully tested with our component library.