---
title: "Vue Forms Examples | Mobiscroll"
component: "Forms"
framework: "Vue"
library_version: "6.2.0"
url: "https://demo.mobiscroll.com/vue/forms"
---

# Advanced Vue forms

Form elements for desktop and mobile with text input, select, slider, switch, checklist, radio buttons and more. For Vue and Nuxt. Last update: Oct 30, 2026

## Description

Form fields from inputs and text areas to segmented controls & switches can be used to create forms for event creation, editing and much more. Build custom forms for mobile and desktop with the responsive grid layout, or render them in popups & modals for add/edit screens.

## Building forms

- [Mobile form](https://demo.mobiscroll.com/vue/forms/mobile.md) - Vue Single column mobile form example with field groups. Deliver different fields types with a consistent look & feel.
- [Inline desktop form](https://demo.mobiscroll.com/vue/forms/desktop.md) - Vue single and multi-column desktop form. Render forms right on the page with a consistent look & feel.
- [Responsive form](https://demo.mobiscroll.com/vue/forms/responsive.md) - Responsive Vue form using grid layout. Define how the form elements behaves across multiple screen sizes.
- [Inside a modal](https://demo.mobiscroll.com/vue/forms/popup.md) - Vue embedded forms in modal or pop-over. Perfect layout for contextual add/edit forms.

## Alerts & notifications

- [Alert, confirm & prompt](https://demo.mobiscroll.com/vue/forms/alert-confirm-prompt.md) - Vue alert, confirm and prompt dialogs for giving feedback to users and for quick & focused data entry.
- [Toast & snackbar](https://demo.mobiscroll.com/vue/forms/notifications.md) - Vue notification examples of toast and snackbar with or w/o action. With undo, retry or custom functionality.

## Buttons

- [Buttons](https://demo.mobiscroll.com/vue/forms/buttons.md) - Vue button styling with full-width and justified layout along with icons, borderless/flat and outline rendering.
- [Segmented](https://demo.mobiscroll.com/vue/forms/segmented.md) - Vue segmented control with single & multiple select for radio buttons and checklists. It supports icons, text, colors.
- [Stepper](https://demo.mobiscroll.com/vue/forms/stepper.md) - Vue stepper example with fixed/custom steps and editable values.
- [Colors](https://demo.mobiscroll.com/vue/forms/button-segmented-stepper-colors.md) - Vue button, segmented and stepper with color presets for primary, secondary, success, danger and more.

## Inputs & fields

- [Field types](https://demo.mobiscroll.com/vue/forms/inputs-text-areas-date-fields.md) - Vue text field input examples with single-, multi-line, masked, reveal password, disabled, error styling.
- [Customize the input](https://demo.mobiscroll.com/vue/forms/input-label-types.md) - Vue input examples with underlined, boxed and outline rendering and labels stacked, inline and floating.

## Toggle & radio

- [Checkbox](https://demo.mobiscroll.com/vue/forms/checkbox.md) - Vue checkbox and checklist demo and styling with or without description text. Supports disabled styling.
- [Switch](https://demo.mobiscroll.com/vue/forms/switch.md) - Vue switch/toggle demo with or without description. Alternative to the checkbox. Supports disabled styling.
- [Radio buttons](https://demo.mobiscroll.com/vue/forms/radio-button.md) - Vue radio button demo for single select option lists. Use it with or without description, supports disabled styling.

## Customizing the look & feel

- [Theming capabilities](https://demo.mobiscroll.com/vue/forms/themes-ios-material-windows.md) - Vue forms with iOS, Material, Windows light and dark themes. Choose from existing themes or create your own.