Input

<>
  <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>
</>

Use an Input when you want to allow a user to enter a single line of text. By default, text inputs allow users to enter any type of text (letters, numbers, and symbols). You can set the input to more specific types if needed. It is used with the Label and Help Text components.

• Include a visible label on all form fields.
• Each label must use the htmlFor prop that equals the id of the associated input.
• Avoid placeholder text. It disappears from the field when the user enters text, isn't broadly supported by assistive technologies, and doesn't display in older browsers.
• Use 1 of 3 ways to label a form field:
  • Visible label with Label (preferred)
  • Visible label that's associated to the input with aria-labelledby
  • Label directly using aria-label
• Provide clear identification of required fields in the label or at the start of a form. If you use the required field indicator, include the form key at the start of the form.
  • Use the required prop to programatically indicate they are required to browsers.
• Use Help Text and an error icon to show inline error text on any field that errors to make it visually clear that the field changed.
• If the Input has associated help text or error text, include the aria-describedby prop on the input. This should match the id of the help or error text.

The Input component should include the base input, along with supporting elements to compose an input field that gives users the context they need to successfully fill it out.

• Label — Every form field should have a label. The label should indicate what should be entered into field.
• Required field indicator — If most of the inputs on a form are optional, indicate the few that are required with text or a required indicator.
• Help Text — Text that's placed below the field to help users prevent an error and describes what makes the form field successful.

<>
  <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>
</>

• Prefix/suffix text — Text that can be used as a prefix and/or suffix to the value that is entered. Use prefix/suffix to help users format text.
• Icon — Icons can be placed in the same area as the prefix and suffix text. Icons should trigger an action (like clearing a field) or in rare cases, provide further context to what value should be entered to make a field's purpose more immediately visible (like a search icon).

<>
  <Label htmlFor="payment_amount" required>Payment amount</Label>
  <Input aria-describedby="payment_amount_help_text" id="payment_amount" name="payment_amount" type="text" placeholder="124.45" insertBefore={<Text color="colorTextWeak" as="span" fontWeight="fontWeightSemibold">$</Text>} onChange={()=>{}} required />
  <HelpText id="payment_amount_help_text">Enter a dollar amount in USD format.</HelpText>
</>

<>
  <Label htmlFor="message_title" required>Message title</Label>
  <Input
    aria-describedby="display_name_help_text"
    id="message_title"
    name="display_name"
    type="text"
    placeholder="Ahoy, World"
    insertAfter={
      <Button variant="link">
        <InformationIcon decorative={false} size="sizeIcon20" title="Get more info" />
      </Button>
    }
    onChange={()=>{}}
  />
  <HelpText id="display_name_help_text">Enter a short title for your message.</HelpText>
</>

How an input functions varies depending on the value of its type attribute. If a type attribute is not specified, the default type is text. The following type options are available:

A single-line text input.

An input for editing an email address. This looks like a text-type input but has validation parameters and relevant keyboard in browsers and devices with dynamic keyboards.

An input that is not displayed but whose value is submitted to the server.

An input whose value is obscured. This input alerts a user if the site isn't secure.

An input that can't be edited but can receive focus. Allows users to highlight the text in the field.

An input for entering search strings. It may include an icon in supporting browsers that can be used to clear the field. It displays a search key instead of enter key on some devices with dynamic keypads.

An input for entering a telephone number. It displays a telephone keypad in some devices with dynamic keypads.

An input for entering a URL. The input value is automatically validated to ensure that it's either empty or a properly-formatted URL before the form can be submitted.

Use an Input with number functionality by setting type="number". Users can change the numeric value by entering a number, using keyboard arrow keys and increment buttons.

It displays a numeric keypad in some devices with dynamic keypads.

In most cases, include a default value that the user can change and would not cause harm if accidentally used. Use Help Text to explain what inputs are accepted, like minimum or maximum values or step intervals, especially if there's no default value. Help Text should also include any important contextual information about what the number input represents.

<>
  <Label htmlFor="reload_amount">Reload amount</Label>
  <Input aria-describedby="reload_amount_help" id="reload_amount" name="reload_amount" defaultValue="0" type="number" min="0" max="1000" />
  <HelpText id="reload_amount_help">Maximum amount is $1,000.</HelpText>
</>

Provide translated strings for the 'increment' and 'decrement' button labels to make NumberInput localized. The i18nStepUpLabel and i18nStepDownLabel props should be used for this purpose.

<>
  <Label htmlFor="cantidad_de_recarga">Cantidad de recarga</Label>
  <Input aria-describedby="cantidad_de_recarga_help" id="cantidad_de_recarga" name="cantidad_de_recarga" defaultValue="0" type="number" min="0" max="1000" i18nStepUpLabel="incrementar" i18nStepDownLabel="decrementar" />
  <HelpText id="cantidad_de_recarga_help">La cantidad máxima es $1,000.</HelpText>
</>

Change a form field to its error state and use Help Text to add an inline error if the value entered doesn't pass validation requirements.

An error Help Text is placed below the field to inform a user of any errors in their value. Change the Help Text to variant=“error” and add error copy before the original help text copy. Review the error state pattern for guidance on writing error messages.

<>
  <Label htmlFor="email_error">Email address</Label>
  <Input aria-describedby="email_error_help_text" id="email_error" name="email_error" 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>
</>

Use a disabled form field to show users that they can't interact with the field.

If you want to show information that can't be edited, use a read-only form field or consider another way of showing static information.

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

Use a read-only form field when a field's value can't be changed, but users should be able to read or apply focus on the field. For example, use a read-only form field if a user needs to copy the value.

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

Labels should clearly describe the value being requested. They should be concise and descriptive, not instructional. To do this:

• Use Help Text to provide instruction if needed. For example, don't use "Enter the registration code on the back of your SIM card below" as label text. Instead, use "SIM registration code" as a label and "Find the registration code on the back of your SIM card" as help text.
• Avoid articles (like "a" and "the") and punctuation. For example, use "SIM registration code" rather than "The SIM registration code".

To support internationalization, avoid starting a sentence with the label and using the field to finish it since sentence structures vary across languages. For example, use "Call log expiration date" or "How long should logs be stored?". Don't use "Remove logs after:".

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.

Stack form fields vertically with $space-80 spacing between each field.

<>
  <Box marginBottom="space80">
    <Label htmlFor="first_name">First name</Label>
    <Input id="first_name" name="first_name" type="text" placeholder="John" onChange={()=>{}} />
  </Box>
  <Box>
    <Label htmlFor="last_name">Last name</Label>
    <Input id="last_name" name="last_name" type="text" placeholder="Smith" onChange={()=>{}} />
  </Box>
</>

Avoid placing multiple form fields on the same horizontal row to help make it easier to scan a page vertically. Use the Grid component if you need to place form fields horizontally.

Use text or required indicators to show users which fields they must fill out.

<>
  <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>
</>

Validate form fields on form submission.

Validating a form field when the user leaves the current field (on blur) can be helpful to check for syntax errors. However, this can be frustrating to users who tab through controls to navigate a page, and to screen reader users, who might not be able to detect that an error occurred on blur.

Don't prevent form submission by disabling the submit button. A disabled button cannot be detected by assistive technologies. Use error messages to explain what information is missing or incorrect.

Use Help Text to show an inline error text that explains how to fix an error.

Help Text should include information to help users prevent errors. If HelpText is already on a form field, change it to variant=“error” and add error copy before the original help text copy.

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

• Prefix/suffix — Use a prefix or suffix to help users format their input and to provide more context about the value a user is entering. For example, you could prefix or suffix a field with a currency symbol, or use suffix to append a character counter. Make sure to consider internationalization when using prefixes or suffixes since formatting may differ across languages. For example, currency symbols are placed on the left in American English, while they're placed on the right in French. Don't use prefix/suffix text as a replacement for a label.
• Icon — Use an icon if you need to give the user additional controls for the field. For example, use an icon to clear a field on click, removing the need for users to manually delete their entered value. Place icon buttons that trigger an action on the right side of the field. If you need 2 actions on a field (e.g., popover trigger and clear field), place the icon button that affects the field value on the right, and the other icon on the left.