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 screen examples share FormScreen, AuthFormStage, and presentation controls. Copy their styles and helpers with the example. Grouped is the default mobile surface; Plain is optional. Page uses base colors and Dialog uses elevated colors. Keep field values, selections and custom options in the owner above the presentation wrapper so switching Page/Dialog preserves them. The error control demonstrates a visual state; it does not validate a payout account.

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 options and the selected value in the form's state, updating them through onOptionsChange and onChange. The desktop fields use the same options, so newly added labels survive switching between Phone and Desktop.

Grouped editors use surface="grouped". Choose one surface for the screens of a flow; the palette adapts to light and dark mode on phones without changing the screen layout.

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.