Help Text

<>
  <Label htmlFor="email_address" required>Email address</Label>
  <Input aria-describedby="email_help_text" id="email_address" name="email_address" type="email" placeholder="example@twilio.com" onChange={()=>{}} required/>
  <HelpText id="email_help_text">Use your work email address.</HelpText>
</>

Help Text is placed below a form field to help users prevent an error and describe what makes the form field successful. It’s also used in compact UI situations to communicate feedback on specific page elements, like in a Chat Log.

If you’re highlighting important information, especially if it’s unrelated to an interactive element or a user action, consider using a Callout or Alert instead. For additional guidance on what kind of component to use, use the Alert vs. Callout vs. Toast vs. Help Text guide.

• Pair Help Text with a valid form element. Include a visible label on all form fields.
• Include a unique id for the Help Text, regardless of state ("default" or "error").
• Be sure to also include the aria-describedby prop on the form element that equals the id of the Help Text.

<>
  <Label htmlFor="email_address" required>Email address</Label>
  <Input aria-describedby="email_help_text" id="email_address" name="email_address" type="email" placeholder="example@twilio.com" onChange={()=>{}} required/>
  <HelpText id="email_help_text">Use your work email address.</HelpText>
</>

<>
  <Label htmlFor="select_product_demo" required>Select a product</Label>
  <Select id="select_product_demo" htmlFor="select_product_demo" required>
    <Option value="messaging">SMS</Option>
    <Option value="numbers">Phone Numbers</Option>
    <Option value="video">Video</Option>
  </Select>
  <HelpText variant="default">Choose a Twilio product.</HelpText>
</>

<>
  <Label htmlFor="message" required>Message</Label>
  <TextArea onChange={()=>{}} onChange={()=>{}} aria-describedby="message_help_text" id="message" name="message" placeholder="Enter message" required />
  <HelpText id="message_help_text">Enter at least 120 characters.</HelpText>
</>

Give users enough information in Help Text to prevent input and formatting errors. Keep it concise and scoped to information that will help with validation. For example, use Help Text if a password field has specific requirements that a user should know prior to filling it out.

• Help Text should have enough information to help users prevent errors.
• Use Help Text to provide instruction if needed. For example, don't use "Enter the date you wish to receive your bill below" as label text. Instead, use "Billing date" as a label and "Your account will be automatically billed on the above date." as Help Text.

<>
  <Label htmlFor="email_default_example">Email address</Label>
  <Input aria-describedby="email_default_help_text" id="email_default_example" name="email_default_example" type="email" placeholder="example@twilio.com" onChange={()=>{}} />
  <HelpText id="email_default_help_text" variant="default">Use your work email address.</HelpText>
</>

An inline error is placed below the field to inform a user of any errors in their value. If HelpText is already on a form field, change it to variant=“error” and add error copy before the original help text copy. If only rendering error text, be sure to include the appropriate attributes on the form element and the Help Text.

For additional guidance on how to compose error messages, refer to the error state pattern.

<>
  <Label htmlFor="email_error_example">Email address</Label>
  <Input aria-describedby="email_error_help_text" id="email_error_example" defaultValue="this is not a vaild entry" name="email_error_example" type="email" placeholder="example@twilio.com" onChange={()=>{}} hasError />
  <HelpText id="email_error_help_text" variant="error">Enter a valid email. Use your work email address.</HelpText>
</>

Warning Help Text can be used to:

• Preemptively warn a user before an action is taken that may result in an undesired effect (e.g., “You have entered an external email. Use your work email address.”).
• Help a user avoid a potential issue.

Warning Help Text should explain the possible issue, what to do, and what happens if they don't.

<>
  <Label htmlFor="email_warning_example">Email address</Label>
  <Input aria-describedby="email_warning_help_text" id="email_warning_example" defaultValue="paste@abc.com" name="email_warning_example" type="email" placeholder="example@twilio.com" onChange={()=>{}} />
  <HelpText id="email_warning_help_text" variant="warning">You have entered an external email. Use your work email address.</HelpText>
</>

Success Help Text should be used to:

• Confirm an action has completed.
• Inform a user that a process has started or is in progress (e.g., “Valid work email address.”).

Avoid using the word "successfully" when composing success Help Text—it's redundant.

<>
  <Label htmlFor="email_success_example">Email address</Label>
  <Input aria-describedby="email_success_help_text" id="email_success_example" defaultValue="paste@twilio.com" name="email_success_example" type="email" placeholder="example@twilio.com" onChange={()=>{}} />
  <HelpText id="email_success_help_text" variant="success">Valid work email address.</HelpText>
</>

Alert

• Alerts communicate information relevant at the system level.
• Do not use Alerts in response to user action.

Callout

• Callouts communicate information particular to a section of a page, or information that applies to a whole page.
• Use a Callout when there are multiple pieces of information to convey. For example, an error summary.
• Callouts can result from a user action, but don’t have to. Therefore, they can include either static or contextual content.

Toast

• Toasts communicate brief, easily comprehended messages.
• Toasts generally result from a user action.
• If the message is contextual or specific to a particular part of a page, consider Help Text or a Callout.
• Do not use a Toast if the message is longer than two sentences (~140 characters). Use a Callout instead.
• Do not use a Toast if there is more than one anchor or button. Use a Callout instead.

Help Text

• Help Text communicates contextual responses.
• Help Text can result from a user action, but don’t have to.

Use Help Text when users might need additional information to fill out a form field.