Privacy
Use the Privacy pattern to inform a user of form fields that are not for personal data.
<><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{' '}<Anchorhref="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></>
// 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), 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.
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).
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.
<><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{' '}<Anchorhref="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.
<><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{' '}<Anchorhref="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></>
If there is additional help text on a form component, append the privacy help text after the additional help text.
<><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{' '}<Anchorhref="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></>
If an input containing a privacy indicator is in an error state, the error message will replace all help text, including the privacy indicator.
const hasError = trueconst 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{' '}<Anchorhref="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 datalike 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 datalike your name, email address, or phone number.
Do
Append privacy help text so it is read after any additional help text.
Avoid entering personal datalike your name, email address, or phone number. [Additional help text].
Don't
Add privacy help text before additional help text.