sign-in

Sign In

Passwordless sign-in card: the email the code went to, a one-time code that enables the submit once complete, and passkey or password alternatives.

States: Default

Parts

Part	File	Does
SignIn	SignIn.vue	Lets the shopper sign in with an emailed code, a passkey or a password.

Install

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

Installs with it: button; card; field; input; input-otp
npm packages: @lucide/vue

Built from

Button Card Field Input Input OTP

API reference

SignIn SignIn.vue

Lets the shopper sign in with an emailed code, a passkey or a password.

Prop	Type	Default
email*	string	—

codeLength	number	6

codeHint	string	—

title	string	'Sign in'

description	string	'No password needed. We email you a code.'

emailLabel	string	'Email'

changeLabel	string	'Change'

codeLabel	string	'Verification code'

submitLabel	string	'Verify and sign in'

separatorLabel	string	'or'

passkeyLabel	string	'Use a passkey'

passwordLabel	string	'Sign in with password'

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

class	ClassValue	—

code	string	''

Event	Payload
change	—

submit	code: string

password	—

update:code	value: string

passkey	—

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

Example