Skip to contentSkip to navigationSkip to topbar
Figma
Star

Privacy

Use the Privacy pattern to inform a user of form fields that are not for personal data.


Component preview theme
<>
<Label htmlFor="input">Friendly name</Label>
<Input id="input" type="text" aria-describedby="help-text" value="My favorite service" />
<HelpText id="help-text">
Avoid entering{' '}
<Anchor
href="https://www.twilio.com/docs/glossary/what-is-personally-identifiable-information-pii"
showExternal
>
personal data
</Anchor>{' '}
like your name, email address, or phone number.
</HelpText>
</>

Ingredients

Ingredients page anchor

Help Text

// import all components for Privacy patterns

import {​ HelpText } from "@twilio-paste/core/help-text";
import { Anchor } from "@twilio-paste/core/anchor";
import { Box } from "@twilio-paste/core/box"
import { Input } from "@twilio-paste/core/input"

Personally Identifiable Information (PII)(link takes you to an external page), or personal data, is data that corresponds to a single person. PII might be a phone number, national ID number, email address, or any data that can be used, either on its own or with any other information, to contact, identify, or locate a person. Read about PII used in Twilio Products(link takes you to an external page).

In the API, Twilio clearly labels fields as “PII” and “Not PII”, defines what PII is, and outlines how Twilio handles fields marked "Not PII".

In our UIs, we currently do not label fields that are not intended to store personal data. This data is then available and exposed in our internal tools, such as Monkey. We need to adequately warn or discourage customers from putting personal data into freeform fields that are not intended for PII. In particular, we’ve seen users input personal data, such as their first and last name, into the Friendly Name field even though it isn't PII.

There are a lot of non-PII fields where the risk that a user would accidentally input sensitive information is low (such as SIDs). The Privacy pattern defines how to inform a user to not input personal data in fields where the risk of inputting sensitive info is higher (such as Friendly Name).

General

General page anchor

The Privacy pattern is used to communicate the data management of a form field. Use a Privacy indicator to inform a user of a field where the data is not PII.

Privacy indicators:

  • Leverage help text placed alongside a form component where a user may accidentally enter personal data in fields that we don’t treat as PII on our systems.
  • Refer to PII as “personal data”, where “PII/non-PII” terminology is reserved for internal use.
  • Provide a subtle prompt about personal data to users, rather than a warning.
  • Are different from a required field indicator, which is a visual representation to inform a user of a required field.

A privacy indicator is Help Text and has specific copy to inform a user of a non-PII field. Within the Help Text is an Anchor linking out to Twilio docs on how we handle PII(link takes you to an external page).

Component preview theme
<>
<Label htmlFor="input">Friendly name</Label>
<Input id="input" type="text" aria-describedby="help-text" value="My favorite service" />
<HelpText id="help-text">
Avoid entering{' '}
<Anchor
href="https://www.twilio.com/docs/glossary/what-is-personally-identifiable-information-pii"
showExternal
>
personal data
</Anchor>{' '}
like your name, email address, or phone number.
</HelpText>
</>

Because the privacy indicator leverages Help Text, it shares all of the Accessibility guidelines of that component.

Use when informing a user that a “friendly name” or "unique name” field is non-PII.

Component preview theme
<>
<Heading as="h2" variant='heading20'>Create new service</Heading>
<Label htmlFor="input">Friendly name</Label>
<Input id="input" type="text" aria-describedby="help-text" value="My favorite service" />
<HelpText id="help-text">
Avoid entering{' '}
<Anchor
href="https://www.twilio.com/docs/glossary/what-is-personally-identifiable-information-pii"
showExternal
>
personal data
</Anchor>{' '}
like your name, email address, or phone number.
</HelpText>
<Box marginTop="space60">
<Button variant='primary'>Create</Button>
</Box>
</>

Positioning with additional help text

Positioning with additional help text page anchor

If there is additional help text on a form component, append the privacy help text after the additional help text.

Component preview theme
<>
<Label htmlFor="input">Friendly name</Label>
<Input id="input" type="text" aria-describedby="help-text" value="My favorite service" />
<HelpText id="help-text">
This is the name the end user sees in your Verify message. Avoid entering{' '}
<Anchor
href="https://www.twilio.com/docs/glossary/what-is-personally-identifiable-information-pii"
showExternal
>
personal data
</Anchor>{' '}
like your name, email address, or phone number.
</HelpText>
</>

Positioning with error text

Positioning with error text page anchor

If an input containing a privacy indicator is in an error state, the error message will replace all help text, including the privacy indicator.

Component preview theme
const hasError = true
const PrivacyPatternError = () => {
return (
<>
<Label htmlFor="input">Friendly name</Label>
<Input id="input" type="text" aria-describedby="help-text" value="Service #3" />
{hasError ? <HelpText variant='error' id="help-text">Friendly name cannot contain special characters.</HelpText>
:
<>
<HelpText id="help-text">
This is the name the end user sees in your Verify message. Avoid entering{' '}
<Anchor
href="https://www.twilio.com/docs/glossary/what-is-personally-identifiable-information-pii"
showExternal
>
personal data
</Anchor>{' '}
like your name, email address, or phone number.
</HelpText>
</>}
</>
);
};
render(<PrivacyPatternError />)
Avoid entering personal data(link takes you to an external page)like your name, email address, or phone number.
Do

Use the same copy as in the pattern to indicate a non-PII field.

Don't add your name here!
Don't

Update the copy specific to a particular field as that may encourage inconsistencies across the customer experience. If the default copy doesn’t work for your use case, please create a Github Discussion to discuss adding a new variant.

[Additional help text]. Avoid entering personal data(link takes you to an external page)like your name, email address, or phone number.
Do

Append privacy help text so it is read after any additional help text.

Avoid entering personal data(link takes you to an external page)like your name, email address, or phone number. [Additional help text].
Don't

Add privacy help text before additional help text.