Skip to main content

Text-field

A text-field is a form component which allows users to input and edit data.

Example

Text field on a default theme

Best practices

Use text-field when only one line of input is required.

Do

  • It is recommended to have some sort of hint text inside and/or label above your text-fields to indicate what kind of text input the user should type. The framework will style hint text appropriately.
  • When reasonable, automatically set focus to the primary text-field or the first text-field in a form.
  • Make the width of your text-fields about a third wider than the longest anticipated input.
  • Limit the length of allowable input text when you can. Since text-field input may vary from one use case to another, the length should be limited to the maximum number of characters required. For example, if the valid input is a number between 0 and 9999, use a numeric text-field that is limited to four characters.
  • When stacking many text-fields, try to group them together with group headings to make the amount of text-fields less overwhelming and scannable.
  • Work with your developers to define appropriate input restrictions to govern what a user is allowed to input in a text-field. For example, restricting input to alphabetic characters only, numerals only, or restricting certain characters, etc.
  • Pre-fill text-fields with known strings when possible. For example, if the user has a profile established on your site, you might be able to pre-fill the text-field for their name when asking the user for their shipping address.
  • It might make sense to make some pre-filled text-fields read-only. The framework will style them appropriately.
  • The framework offers special styling for required text-fields as well as highlighting a text-field when the user skips over a required text-field. (See the framework’s highlight option). A flyout will alert the user of what is required. Ex: "Address is required".
  • Use valid functional labels for text-fields.
  • Read Only fields are focusable and should have aria-label="Read Only".

Don’t

  • Don’t use a text-field if the valid input options can be pre-defined. Consider using a combo component instead.
  • Don’t use a text-field for date or time entry. Consider using a datetime picker instead.
  • Don’t use the text-field component for multi-line input. Use the textarea component instead.

Also known as

Input field
Text input
Text box

Related

Label
Password
Search
Textarea

Options

  • The text-field can have any variation of the following html attributes: disabled, required, read-only, and with placeholder text.

  • Small: Add a class named f-small to have a small text box with the width of 88px. Use this for fields where smaller strings are expected.

  • Flex: Add a class named f-flex to have the text box snap to the full width of the container or nearest column.

Development

  • Schema definition: The text-field schema defines the acceptable configurations, requirements, and options for each component.

Code and preview

Default Text field

<label class="c-label" for="default">Label</label>
<input id="default" class="c-text-field" type="text" name="default">

Default Text field (small)

<label class="c-label" for="defaultSmall">Label</label>
<input id="defaultSmall" class="c-text-field f-small" type="text" name="defaultSmall">

Default Text field (flex)

<label class="c-label" for="defaultFlex">Label</label>
<input id="defaultFlex" class="c-text-field f-flex" type="text" name="defaultFlex">

Disabled Text field

<label class="c-label" for="disabled">Label</label>
<input id="disabled" class="c-text-field" type="text" name="disabled" disabled="disabled">

Required Text field

<label class="c-label" for="required">Label</label>
<input id="required" class="c-text-field" type="text" name="required" required>

Read-only Text field

<label class="c-label" for="readonly">Label</label>
<input id="readonly" class="c-text-field" type="text" name="readonly" readonly="readonly" value="Read only">

Text field with placeholder

<label class="c-label" for="placeholder">Label</label>
<input id="placeholder" class="c-text-field" type="text" name="placeholder" placeholder="Placeholder text">