Arc XP LogoArc Design System
v2.3.0
GuidesPatternsComponentsIcon libraryTokensRelease notes
Github repo
Arc XP LogoArc Design System
v2.3.0
Buttons
ButtonButtonGroupIconButton
Forms
CheckboxCheckboxGroupChicletDateTimePickerMultiSelectRadioRadioGroupSelectTextAreaTextFieldToggle
Hooks
useNotification
Layout
BoxCardFlexFramePageSidebarStackTabsWorkBar
Notifications
AlertAlertDialogDialogInlineAlertSnackbar
Text
EmojiHeadingText
BadgeOverflowMenuSmallProviderSpinnerTooltip

TextField

A form UI element that accepts a text string from the user.

🚧 Under construction

This component is under active development. If you need this component for your project, create an issue in the GitHub repo.
TextField

Features

A standard text input field that accepts a string.

#Component structure

Text field component structure
  1. Label: Label text is used to inform users as to what information is requested for a text field. Every text field should have a label.
  2. Required label
  3. Left icon (optional): The icon on the left is generally static and is used to communicate what type of field it is (e.g. adding a search magnifying glass to denote search.)
  4. Help text (optional): Help Text conveys additional guidance about the input field, such as how it will be used. It should only take up a single line, being persistently visible or visible only on focus. Error messages will take the place of Help Text when necessary. Error messages will take the place of Help Text when necessary, see Error Handling for more information.
  5. Placeholder text: Placeholder Text can be used literally describe the action to be taken by the user, or provide an input example. For example, “Enter name” or “John Doe” for a text field that requires a name.
  6. Character count (optional): For fields that have a maximum character limit.
  7. Interactive icon (optional): An icon that is reserved for additional functionality. This icon is generally interactive and exposes additional menus when interacted with.

#Variants

Default text field Text fields have a large and small variant. Large variants use the large body copy styling for text elements and large icon sizing (24px) for icon elements. Small variants use the small body copy styling for text elements and small icon sizing (16px).

#Usage

Text fields are widespread and need to account for a variety of different states, information densities, and ever-changing layouts.

#Default

The default text field is the standard input users will see before interacting with it. Default text field

#Focus

The focus state is used to indicate when a text field is active. Border color and a shadow spread are used to denote the change in state. Focus text field

#Danger

The danger state is used to capture any errors that occur on form submission. This will always be accompanied by an error message and an Alert. The error message should replace any Help Text currently in view. See Error Handling for more information. A single line is recommended for error messages but two lines is acceptable in certain circumstances. The danger state comes with its own variation on focus, changing the shadow spread from purple to red. Danger text field

#Disabled

The disabled state is used to block all interaction with a text field. Disabled text field
Copyright 2021 Arc XP