<h2>Overview</h2>
<p>The sign-in pattern contains standards for pages that allow a user to access a restricted product (website, web application, platform, etc.). Users sign in by entering their email and password or using a social network, single sign-on (SSO), or one-time password (OTP).</p>
<p><br><strong>Outcomes</strong></p>
<p>When a user tries to access a product through a sign-in page, there are two possible outcomes:</p>
<ul>
<li>The authentication is successful, taking the user to the product’s main landing page.</li>
<li>The authentication fails, giving the user an error message about the failure and how to solve it.</li>
</ul>
<p><br><strong>Inactivity</strong></p>
<p>For security reasons, the system logs out users who have been inactive for a long period. They will get a message explaining why it happened. After signing in again, the system should take the user back to their previous location before they logged out. The timeout period is usually 30 minutes but may change based on your product&#39;s security requirements.</p>
<p><br><strong>Password recovery</strong></p>
<p>When a user forgets their email or password, there are links to help them reset it. Once the user selects one of the links, the sign-in page shows fields to recover their information.</p>
<p><br>Note that this pattern doesn’t dictate which methods a product should follow. They may change according to the needs of each product.</p>
<h2>Sign-in methods</h2>
<p>There are four ways a user can sign in to a restricted page. Each one has a different anatomy and behavior.</p>
<h3>Progressive authentication</h3>
<p>DDS suggests progressive authentication with single sign-on (SSO) by default. It&#39;s a safer and more user-friendly option, as it reduces distractions and cognitive load.</p>
<p><br>On progressive authentication:</p>
<ol>
<li>The user enters their email. The system then checks if SSO is available for them.</li>
<li>If SSO is available, it redirects the user to the page they want to access.</li>
<li>If SSO isn’t available, the password field will appear.</li>
</ol>
<details data-name='image-block' data-images='[{"alt":"Example of a progressive authentication sign-in form.","caption":"The first step is for the user to enter their email. If SSO is available, they will be logged in. If not, the password field will appear.","url":"https://dds.dell.com/site/v2/patterns/sign-in/email-pass.png"}]' data-numberofcolumns='1'></details>

<h3>Email and password</h3>
<p>To validate access, a user must enter their email and password, then select the &quot;Sign in&quot; button. Progressive authentication also reverts to this method if SSO is unavailable.</p>
<details data-name='image-block' data-images='[{"alt":"Example of a sign-in form with email and password fields.","caption":"The user enters their email and password on the same step.","url":"https://dds.dell.com/site/v2/patterns/sign-in/email-pass.png"}]' data-numberofcolumns='1'></details>

<h3>One-time password (OTP)</h3>
<p>An OTP (one-time password) can only be used once and offers an extra layer of security. Unlike a regular password, it will not work if reused, even if you input it correctly.</p>
<p>The OTP sign-in process follows these steps:</p>
<ol>
<li>The user enters their email. The system will then check if they are already registered.</li>
<li>If they are registered, they will receive an OTP via email and get an input field on the sign-in page to enter it.</li>
<li>Once they enter the correct OTP on the sign-in page, they will be redirected to the page they want to access.</li>
</ol>
<details data-name='image-block' data-images='[{"alt":"Example of one-time password sign-in form.","caption":"After entering their email, the user selects “Sign in Using One-time Password.” On the next step, they will enter the one-time password received via email.","url":"https://dds.dell.com/site/v2/patterns/sign-in/otp.png"}]' data-numberofcolumns='1'></details>

<h3>Third-party providers</h3>
<p>Third-party providers are a quick and efficient way to allow users to sign in to your product. This reduces the need to create a new account and makes it easier for users to register and sign in.</p>
<p>It’s a simple process with the following steps:</p>
<ol>
<li>The user selects the third-party provider they want to use.</li>
<li>The third-party provider receives a login request.</li>
<li>Once the third-party provider approves the login request, the system takes the user to the page they want.</li>
</ol>
<p>Consult your product team to determine which third-party sign-in your product can offer. Also, refer to each third-party brand&#39;s guidelines when using logos.</p>
<details data-name='image-block' data-images='[{"alt":"Example of progressive authentication sign-in form containing third-party sign-in options.","caption":"Example of progressive authentication sign-in with third-party sign-in options.","url":"https://dds.dell.com/site/v2/patterns/sign-in/3rd-party.png"}]' data-numberofcolumns='1'></details>

<h2>Layout</h2>
<p>The user’s primary goal is signing in, and the visual design and emphasis on the page should reflect that. If there is any extra content, it should be brief and easy to read. It should not distract the user from the sign-in form.</p>
<h3>Centered</h3>
<p>A card-like container in the center of the screen holds the sign-in form. A card is a single, contained unit that groups related content in a concise, digestible format.</p>
<p>The sign-in form in the center of the screen provides a straightforward entry point for users. Without distractions on the page, users can focus on signing in. This sign-in is often paired with a solid color or a brand-approved background texture. Since the sign-in form is the focal point, we don’t recommend complex illustrations.</p>
<details data-name='image-block' data-images='[{"alt":"Example of sign-in form centralized in the page.","caption":"Example of centered layout.","url":"https://dds.dell.com/site/v2/patterns/sign-in/centered.png"}]' data-numberofcolumns='1'></details>

<h3>Split-screen</h3>
<p>The split-screen page is an alternate design with marketing content or other visuals related to the product. It uses the same design and behavior as the centered layout but is confined to one part of the page. The content available on the other part should be simple and not distracting to the user.</p>
<p>When using split-screen, make sure to mark &quot;Sign In&quot; semantically as an H1, as this is the true title of the page. Any marketing heading to the side, such as &quot;Dell Account Benefits,&quot; should be marked as an H2.</p>
<p>Also, ensure users can tab through the sign-in form. They should be able to navigate the page using only a keyboard. Use landmark regions to choose the sign-in region. This lets screen readers skip to the input fields. Find more information on <a href="https://www.w3.org/TR/WCAG20-TECHS/ARIA11.html">ARIA11: Using ARIA landmarks</a> to identify regions of a page.</p>
<p>To create a split-screen layout, follow the <a href="https://www.delldesignsystem.com/foundations/grid/">DDS - Grid</a> recommendations.</p>
<details data-name='image-block' data-images='[{"alt":"Example of sign-in form in a split-screen layout.","caption":"Example of split-screen layout.","url":"https://dds.dell.com/site/v2/patterns/sign-in/split-screen.png"}]' data-numberofcolumns='1'></details>

<h3>Custom</h3>
<p>Different teams have different sign-in needs. An example is dell.com, which most users access via authentication with Google. This justifies access through Google being at the top.</p>
<p>This sign-in pattern will not be a component but is available through a sticker sheet in the Figma UI Kit. All components used in the design and its variations exist in DDS. Designers can change them according to the recommendations for each component.</p>
<p>This pattern does not dictate which layout and methods an application must follow. Discuss with your product team which option works best.</p>
<details data-name='image-block' data-images='[{"alt":"Example of a sign-in form in a custom layout.","caption":"Example of custom layout.","url":"https://dds.dell.com/site/v2/patterns/sign-in/custom.png"}]' data-numberofcolumns='1'></details>

<h2>Anatomy and spacing</h2>
<p>The sign-in pattern is based on the <a href="https://www.delldesignsystem.com/patterns/form/">Form</a> pattern. By default, text inputs are in a single column with top-to-bottom content. This also applies to other components in the form pattern, like checkboxes. Keep component sizes consistent throughout the pattern.</p>
<p>Sign-in form components can use as much vertical space as needed. But long forms can frustrate users and lower completion rates.</p>
<ul>
<li><strong>Vertical spacing</strong> is expressed between form components via row padding and section padding. </li>
<li><strong>Row padding</strong> is the natural space between components, like a line wrap. </li>
<li><strong>Section padding</strong> is a larger space between grouped components, like address text inputs in a shipping section. Section padding is 150% of the row padding.</li>
</ul>
<table>
<tr>
<th/><b>Spacing
<th/><b>Section
<th/><b>Row
</tr><tr>
<td/>Compact
<td/>24px
<td/>16px
</tr><tr>
<td/>Default
<td/>36px
<td/>24px
</tr><tr>
<td/>Comfortable
<td/>48px
<td/>32px
</tr></table>

<h2>Validation messages</h2>
<p>Sign-in credentials must be validated after users send their information.</p>
<p>Validate as much of the user’s data before submission as possible. This should happen when the input field loses focus and checks for input errors, like invalid characters and empty fields. This helps users find and fix mistakes before submitting the sign-in form.</p>
<h3>Error</h3>
<p>Inline error messages should appear below any empty or invalid required fields, like an incorrectly formatted email. You can show them once the field loses focus or the user selects an action button (“Continue” or “Sign In&quot;).</p>
<p>Errors in the contextual message bar should appear after the user selects an action button. Don’t immediately show the error message if they enter an email or username that isn’t valid. Wait to show the error until they send their info. This will protect valid emails and usernames from exposure. The page should be reloaded, the password field cleared, and the user returned to the email input field.</p>
<p>Use the same generic error message for incorrect email or password. This protects valid email addresses and passwords from exposure.</p>
<p>Some error message suggestions include:</p>
<ul>
<li>”Enter your email address to continue” – for an empty email field.</li>
<li>”Enter a valid email address to continue” – for an invalid email.</li>
<li>”Enter your password to continue” – for an empty password field.</li>
<li>”Check that you&#39;ve entered your email and password correctly.&quot; – for incorrect email, password, or both.</li>
</ul>
<details data-name='image-block' data-images='[{"alt":"Example of a sign-in form containing an inline error message.","caption":"Example of inline error message.","url":"https://dds.dell.com/site/v2/patterns/sign-in/inline-error.png"},{"alt":"Example of a sign-in form containing a contextual message bar with error information.","caption":"Example of contextual message bar containing error information.","url":"https://dds.dell.com/site/v2/patterns/sign-in/contextual-bar-error.png"}]' data-numberofcolumns='2'></details>

<h3>Success</h3>
<p>The success message will always appear as a single line. It shows as soon as the main page of the app or platform is displayed after a successful validation.</p>
<details data-name='image-block' data-images='[{"alt":"Example of success message the user gets after successfully signing in.","caption":"Example of success message.","url":"https://dds.dell.com/site/v2/patterns/sign-in/success.png"}]' data-numberofcolumns='1'></details>

<h2>Accessibility</h2>
<p><strong>An error should not be indicated by color alone</strong></p>
<p>Identify an error with appropriate text and optionally an icon. This helps users who cannot see color, or who are using assistive technology.</p>
<p>WCAG 2.2: <a href="https://www.w3.org/WAI/WCAG22/Understanding/use-of-color.html">1.4.1 Use of Color</a></p>
<p><strong>Direct focus with the error message bar</strong></p>
<p>When a form submission is unsuccessful, field-level indicators are not enough for some users to perceive that an error has occurred. Screen reader users, for example, will need a text explanation of which fields were missing or incorrect.</p>
<p>WCAG 2.2: <a href="https://www.w3.org/WAI/WCAG22/Understanding/error-identification.html">3.3.1 Error Identification</a>, <a href="https://www.w3.org/WAI/WCAG22/Understanding/error-suggestion.html">3.3.3 Error Suggestion</a></p>
<p><strong>Mark fields that require input</strong></p>
<p>All fields should be marked as required or optional. Many screen reader users are blind and rely on critical information to be read out. Marking fields with HTML5 &lt;input required&gt; ensures that these users will always hear them announced as required.</p>
<p>WCAG 2.2: <a href="https://www.w3.org/WAI/WCAG22/Understanding/labels-or-instructions.html">3.3.2 Labels or Instructions</a><a href="https://www.w3.org/WAI/WCAG22/Understanding/labels-or-instructions.html"></a></p>
<h2>Feedback</h2>
<p>We would love to know your opinion about Dell Design System. Please reach out to us through the <a href="https://www.delldesignsystem.com/contact/feedback/">Feedback Form</a>. We look forward to hearing from you!</p>


dds__icon--metadata

Vanilla

angular

Angular

react

React

Allows users to easily validate their access to restricted content.

Sign-in

Home

About DDS

Migration guide

A11y annotation kit

Figma

Storybooks

Community library

Tokens

Getting started

Overview

Color

Elevation

Grid

Icons

Spacing

Typography

Foundations

Accordion

Action menu

Badge

Blockquote

Breadcrumb

Button

Card

Carousel

Checkbox

Date picker

Divider

Drawer

Dropdown

File input

Footnote

Link

List

Loading indicator

Message bar

Modal

Notification

Overlay

Pagination

Popover

Progress bar

Progress tracker

Radio button

Search

Select

Side navigation

Switch

Tabs

Text area

Text input

Time picker

Tooltip

View more/less

Components

AI design library

Micro-moments

AI Chat  - Community Library

Area chart

Bar chart

Bubble chart

Donut chart

Gauge chart

Line chart

Metrics card

Pie chart

Utilization chart

Dashboard template

Data visualization

Chart customization

Drag and drop

Empty state

Filter

Form

Microinteraction

Patterns

Accessibility

Brand

Partners

Case studies

Blog

FAQs

Tools

Videos

Resources

Send Feedback

Check My Tickets

Find us on Teams

Support