Form

WebAuthn

Published on

Description

The WebAuthn input components provide hidden form fields for Web Authentication API (WebAuthn) passkey flows. InputWebAuthnCreate is used during passkey registration, and InputWebAuthnGet is used during authentication.

Use these components when implementing passwordless authentication with passkeys. Both components render hidden inputs with autocomplete='webauthn' and require data-options for configuration.

Example

Open in new tab
View HTML markup 
<h2>Register</h2>
<p>WebAuthn create input is a hidden input used during passkey registration.</p> <input value="" is="ds-input-webauthn-create" name="webauthn-create" data-options="[object Object]" type="hidden" />
<h2>Authenticate</h2>
<p>WebAuthn get input is a hidden input used during passkey authentication.</p> <input value="" is="ds-input-webauthn-get" name="webauthn-get" data-options="[object Object]" autocomplete="webauthn" type="hidden" />
<p>Need help? <a href="/form/input-webauthn" target="_top">View our guidance</a></p>

Accessibility

  • Both components render as hidden inputs and are not visible or focusable
  • The autocomplete="webauthn" attribute signals to the browser to trigger the WebAuthn ceremony
  • The actual WebAuthn UI is provided natively by the browser or operating system

Variables

None