shipping-address

Shipping Address

Checkout address card with a step badge, name, street, postcode, city and country fields, a same-as-billing checkbox, and a continue button.

States: Default

Parts

Part	File	Does
ShippingAddress	ShippingAddress.vue	Lets the shopper enter a shipping address and continue to the next checkout step.

Install

Writes 3 files into components/sections/shipping-address/. For agents, npx @frontic/ui docs shipping-address prints this reference as markdown; the MCP server serves the same.

Installs with it: badge; button; card; checkbox; field; input; native-select
npm packages: @lucide/vue

Built from

Badge Button Card Checkbox Field Input Native Select

API reference

ShippingAddress ShippingAddress.vue

Lets the shopper enter a shipping address and continue to the next checkout step.

Prop	Type	Default
countries*	CountryOption[]	—

title	string	'Shipping address'

description	string	—

step	string	—

firstNameLabel	string	'First name'

lastNameLabel	string	'Last name'

streetLabel	string	'Street and number'

postcodeLabel	string	'Postcode'

cityLabel	string	'City'

countryLabel	string	'Country'

countryHint	string	—

sameAsBillingLabel	string	'Billing address is the same'

continueLabel	string	'Continue'

surface	'raised' \| 'bare'	'raised'

class	ClassValue	—

firstName	string	''

lastName	string	''

street	string	''

postcode	string	''

city	string	''

country	string	''

sameAsBilling	boolean	true

Event	Payload
update:firstName	value: string

update:lastName	value: string

update:street	value: string

update:postcode	value: string

update:city	value: string

update:country	value: string

update:sameAsBilling	value: boolean

continue	—

Data attribute	Values
data-surface	'raised' \| 'bare'

Example