A mobile address-selection flow built with Vant 4: real CSS variables, controlled address identity, field validation, theme switching and an explicit local-only save.
Native Vant 4.10.2 with Vue 3. The paper artwork and surrounding layout are original. · Implementation reference
02
Vant Design System Design Reference
Vant 4.10.2 CSS variables, read from the installed base stylesheet. The preview applies an original teal primary override through ConfigProvider; the default roles below remain explicitly identified.
Vant Design System Mobile Components with Explicit CSS Roles
Mobile Components with Explicit CSS Roles
Vant targets Vue mobile web interfaces. Its AddressList, Field and CellGroup provide compact receiving-address rows and form cells rather than a desktop administration table. The sample-kit flow uses those native components and makes the selected destination visible in a separate summary.
The primary role defaults to blue through --van-primary-color. Success, danger and warning each reference separate color variables. The specimen deliberately changes the primary to #176b77 through ConfigProvider; it does not call that teal an official Vant brand color. Its original paper-stock artwork is decorative and carries no control state.
Vant Design System The Four-Pixel Padding Scale and Compact Type
The Four-Pixel Padding Scale and Compact Type
Vant exposes padding values of 4, 8, 12, 16, 24 and 32 pixels. These are actual base variables, not inferred from a screenshot. The address-list items use the small padding token, while the surrounding preview adds larger section gaps to make the form and order summary distinct.
The named text sizes run from 10 to 16 pixels, with paired line heights from 14 to 22 pixels. Address text has its own 13px component variable. A mobile product may need larger editorial text than those control defaults: the specimen heading is an original 32px size, reduced to 27px at the page breakpoint.
Vant Design System An Address ID Drives the Radio Selection
An Address ID Drives the Radio Selection
AddressList receives list records with id, name, tel, address and optional isDefault. Its v-model value identifies the chosen record. The summary is computed by finding that ID in the current list, so editing a recipient immediately updates the displayed destination without a second independent summary state.
The unavailable warehouse is passed through disabled-list and given a clear disabled-text explanation. It remains visible for context but cannot become the selected destination. The Default badge identifies the record’s default status; it is separate from the current selection and does not change simply because another radio option is chosen.
Vant Design System Keep the Draft Separate from the Saved Record
Keep the Draft Separate from the Saved Record
The edit event supplies the address record. The editor copies only its editable fields into a reactive draft and stores its stable ID separately. Cancel hides this draft without mutating the saved address. Save replaces the matching record or appends a new local one, then selects that ID.
The specimen renders editing inline below the list instead of opening a bottom popup. That keeps the full example usable in an embedded document. Vant also offers AddressEdit for standardized address entry; this example uses Form and Field because its sample addresses deliberately avoid assuming one country’s administrative area data.
Select a studio and check the summary before opening Edit.
Change the recipient, then cancel to confirm the saved row is unchanged.
Open the editor again, save valid fields and inspect the selected summary.
Vant Design System Field Rules Gate the Submit Event
Field Rules Gate the Submit Event
The Form uses validate-trigger="onSubmit". The recipient validator trims whitespace and requires at least two characters. The telephone validator accepts a modest range of digits, spaces, parentheses and hyphens with an optional leading plus. The address validator requires ten non-whitespace characters. These checks demonstrate mechanics; they are not postal verification or universal telephone validation.
A primary Button with native-type="submit" submits the native form. Vant emits submit only after its rules pass. Errors appear beside the relevant Field, and scroll-to-error moves the invalid field into view. The preview also focuses the first recipient input when editing begins. It preserves the draft during validation failures.
Vant Design System ConfigProvider Maps CamelCase Values to CSS Variables
ConfigProvider Maps CamelCase Values to CSS Variables
The theme-vars object includes primaryColor, buttonPrimaryBackground, buttonPrimaryBorderColor and addressListPadding. ConfigProvider maps those names into the corresponding --van-* variables. The provider uses theme-vars-scope="global" in this isolated document so aliases declared at the root resolve against the changed primary role. Overriding the role and both primary-button values keeps the native action and radio selection coordinated.
Switching the theme prop between light and dark updates Vant’s component theme. The page still needs its own background and text declarations using the theme variables; setting the provider alone does not paint every application element. Decorative paper samples intentionally keep their material colors in both themes.
Vant Design System A Fixed Mobile Action Needs an Embedding Decision
A Fixed Mobile Action Needs an Embedding Decision
AddressList normally reserves eighty pixels of bottom padding for its fixed add button. The preview sets show-add-button to false and provides an ordinary in-flow Button. It also changes addressListPadding to twelve pixels, avoiding both a detached fixed action and an unexplained empty bottom area inside the embedded example.
On a wide screen, the list and material summary form two columns. Below the original 680px breakpoint, they stack. The native AddressList height:100% is explicitly reset to height:auto so the panel follows its content rather than overlapping the next grid row. No global minimum viewport height is used, so the parent page can size the embedded document from its content. The address names wrap on narrow screens rather than forcing the page wider.
Vant Design System Visible Focus and Explicit Local Results
Visible Focus and Explicit Local Results
The Vant base reset removes default focus outlines. The accompanying page stylesheet restores a three-pixel focus-visible ring on buttons, inputs, textareas and tab-indexed controls. This is an application-level addition, not a claim that a library import alone completes accessibility work. The theme switch receives an accessible name and visible label.
A status notice records a local save or destination selection. It explicitly states that no delivery was booked. The example has no checkout endpoint, storage or external side effect. A real checkout would need server-side address validation, delivery eligibility and a final review before purchase.
Keep unavailable addresses visibly explained rather than silently deleting them.
Retain the draft after an invalid submit so the user can correct one field.
Describe whether an action changes local selection or actually books a delivery.
Vant Design System Import the Locale and the Component Styles
Import the Locale and the Component Styles
The complete SFC imports its components locally. The entry file installs the English locale through Locale.use and imports vant/lib/index.css before the original layout stylesheet. The verified package is Vant 4.10.2 with Vue 3; the .mjs suffix on the English locale import matches the installed ESM file.
The standalone preview bundles its JavaScript, CSS and icon font into the document. It removes the unused remote WOFF fallback after preserving the bundled WOFF2 font, so the example does not depend on a third-party font request. Production applications should use their own bundler and asset policy rather than copying a hosted demo URL.
Component geometry comes from Vant; the 680px page breakpoint is an application choice.
The preview restores a visible focus ring because the base reset removes default outlines.
04
Vant Design System Agent Setup
Implementation Starting Point
Verified with Vue 3 and Vant 4.10.2. The example stores no address outside its in-memory state.
javascript
// Create the project first:
// npm create vite@latest vant-specimen -- --template vue
// cd vant-specimen && npm install
// In a Vite Vue 3 project:
// npm install [email protected]
// Save the complete SFC as App.vue and the supplied layout as style.css.
import {createApp} from 'vue';
import {Locale} from 'vant';
import enUS from 'vant/es/locale/lang/en-US.mjs';
import 'vant/lib/index.css';
import './style.css';
import App from './App.vue';
Locale.use('en-US',enUS);
createApp(App).mount('#app');
// index.html must contain <div id="app"></div>.
// Keep the template index.html and replace its entry with the code above.
// npm run dev
A Prompt for Your Project
Agent Prompt
Start from the Vant 4.10.2 sample-kit address selector. Preserve native AddressList and the Form/Field editing flow for adding or modifying a local address, including field validation and selected-address state. Keep Locale setup, the en-US module, ConfigProvider theme scope and content-height AddressList adaptation. Cancellation must not replace an existing address; successful validation updates only the local address collection. Do not add payment or delivery-slot success claims to this address-only specimen.
05
Vant Design System Sources and Scope
Vant 4.10.2. Default tokens and original page choices are distinguished. Sample addresses are fictional; selection and editing stay local.
