Settings and editing forms composed from Field, Input, Select, File Upload, and Button. Sign-up, log-in and verification screens are on Auth Forms. The examples render small helpers from their setup scope with <component :is>, such as FormScreen and AuthFormStage.

Row forms use the FormScreen helper and shared form styles for Page and Dialog. The form owner holds every value above that presentation boundary.

Phone tag rows use the MobileTagRow helper and its shared styles. Copy both files with the examples. The row opens a draft editor with a list of options and trailing checkmarks. Tap anywhere on a row to select it, or use the separate field to add an option. Apply saves the draft; Close discards it. Desktop keeps removable badges.

Keep both the options and selected values in the form's state, bound with v-model:options and v-model. The desktop fields use the same options, so newly added labels survive switching between Phone and Desktop.

Screens default to Grouped. The surface control switches to Plain without changing fields or values. Page uses base colors; Dialog uses elevated colors. Changes to presentation preserve entered values and selections.

Several groups

Variants uses the ProductVariants helper, shared name validation, and the linked FormRowsDemos styles. Add opens a name draft; Edit changes a saved variant. Save applies the draft, Cancel discards it, and Remove variant deletes the edited choice. The parent form owns the saved values.

columns

dialog

surface

GroupedPlain

Edit product

Name

Description

Solid oak with a matte finish. Ships flat, assembles in ten minutes without tools.

Category

Home

Price

€

Weight

kg

Variants

Add

Sizes and finishes a buyer can choose.

MaterialsOak, Steel

LabelsNew

Save changes

Save changes

Group of inputs

Group of mixed controls

Choice in rows

Long form in one group

Tags in rows

Rows with actions

Payout details

Billing details

Upload file

Settings with selection pages

Short values sit beside the label. Longer values wrap below it, and the disclosure stays centered. The entire row opens a selection page; Back returns to the updated summary. The disabled row shows an unavailable setting.

This example uses the SettingsChecklistDemo helper, sample data, and shared styles, alongside the existing DemoBackButton helper.

Image and title

Choose a local cover photo, then name the album. Add Photos opens the native file picker; after selection it becomes Change photo. Canceling the picker keeps the current photo. Save keeps this sample in memory, and Cancel restores the last saved draft. On Phone these actions appear as the checkmark and close buttons.

Copy the ImageAlbumEditor helper with its shared styles. It uses the public FileUpload, Image, Field, FieldGroup, Input, Button, Page, and Dialog components. Desktop uses a labeled input and text actions; Phone keeps the compact image editor. The photo stays in this browser tab. Phone toolbar actions use NavigationButton; confirmation follows the shared application accent.

Settings with a slider

Adjust playback volume with the slider or arrow keys. Turning Sound off disables the slider and keeps its value. Learn more opens a separate explanation. These settings affect this example only.

Copy the SettingsSliderFields helper with its shared types, shared styles and the FormScreen helper. State belongs to the screen, so switching Page, Dialog, or surface keeps the settings.