Props
Usage guidelines
- Any time succinct data needs to be entered by a user, like a date, email address, name, or Pin title.
- Situations where long amounts of text need to be entered, since the full content of the TextField will be truncated. Use TextArea instead.
Best practices
Use helper text for important information. Helper text helps users understand how to complete the text field or to indicate any needed input.
Put essential information in the placeholder text, since it disappears when the user types. The placeholder text is not a replacement for the label.
Always ensure the text field has a visible label. The label provides context and supports users when filling in information.
Remove the label, as this creates accessibility and usability issues.
Only place related fields on the same line.
Place unrelated text fields on the same line, as this can create comprehension issues.
Provide clear and useful error messages that help the user fix the issue. Error messages should be displayed in a timely manner — typically once the field loses focus or when the form is submitted.
Display generic error messages, such as "There is an error".
Consider all text fields as required, unless explicitly noted as optional.
Mark fields as required.
Accessibility
Comprehension
Be sure to provide instructions to help users understand how to complete the form and use individual form controls.
Labels
TextField comes with Label built-in: just use the label
prop. We strongly encourage always supplying a label. Be sure to provide a unique id
so the Label is associated with the correct TextField.
If TextField is labeled by content elsewhere on the page, or a more complex label is needed, the labelDisplay
prop can be used to visually hide the label. In this case, it is still available to screen reader users, but will not appear visually on the screen.
import { Box, Flex, Text, TextField } from 'gestalt'; export default function Example() { return ( <Box padding={8} height="100%" display="flex" alignItems="center" justifyContent="center" > <Flex gap={{ column: 0, row: 6 }}> <TextField id="textfieldexampleA11yVisible" onChange={() => {}} label="First name" size="lg" /> <Flex gap={{ column: 2, row: 0 }} direction="column"> <Text weight="bold" size="300"> First name </Text> <TextField id="textfieldexampleA11yHiddenLabel" onChange={() => {}} label="First name" labelDisplay="hidden" size="lg" /> </Flex> </Flex> </Box> ); }
Validation
When providing a validation message, make sure the instructions are clear and help users complete the field. For example, "Passwords must contain at least 20 characters". In addition, use the helper text to provide instructions to help users understand how to complete the text field or to indicate any needed input, allowed formats, timing limitations, or other pertinent information.
These practices give users of assistive technologies more information about the form, helping them to fill it out.
TextField has conventional keyboard support.
- Users relying on the keyboard expect to move focus to each TextField by using the tab key or shift+tab when moving backwards.
- Setting
disabled
will prevent TextField from receiving keyboard focus or input.
Autofocus
TextField intentionally lacks support for autofocus. Generally speaking, autofocus interrupts normal page flow for screen readers making it an anti-pattern for accessibility.
onSubmit
TextField is commonly used as an input in forms alongside submit buttons. In these cases, users expect that pressing Enter or Return with the input focused will submit the form.
Out of the box, TextField doesn't expose an onSubmit
handler or individual key event handlers due to the complexities of handling these properly. Instead, developers are encouraged to wrap TextField in a <form>
with an onSubmit
handler..
Localization
Be sure to localize errorMessage
, helperText
, label
, maxLength
's errorAccessibilityLabel
and placeholder
.
Variants
Helper text
Whenever you want to provide more information about a form field, you should use helperText
.
import { useState } from 'react'; import { Box, TextField } from 'gestalt'; export default function Example() { const [value, setValue] = useState(''); return ( <Box padding={8} height="100%" display="flex" alignItems="center" justifyContent="center" > <Box padding={2} color="light"> <TextField autoComplete="new-password" helperText="Password should be at least 20 characters long" id="variants-helper-text" label="Password" onChange={(e) => { setValue(e.value); }} type="password" value={value} /> </Box> </Box> ); }
Label visibility
In some cases, the label for a TextField is represented in a different way visually, as demonstrated below. In these instances, you can set labelDisplay="hidden"
to ensure TextField is properly labeled for screen readers while using a different element to represent the label visually.
import { Box, Flex, Text, TextField } from 'gestalt'; export default function Example() { return ( <Box padding={8} height="100%" display="flex" alignItems="center" justifyContent="center" > <Flex gap={{ column: 2, row: 0 }} direction="column"> <Text weight="bold" size="300"> First name </Text> <TextField id="textfieldexampleHiddenLabel" onChange={() => {}} label="First name" labelDisplay="hidden" size="lg" /> </Flex> </Box> ); }
Read-only
Read-only TextFields are used to present information to the user without allowing them to edit the content. Typically they are used to show content or information that the user does not have permission or access to edit.
import { useState } from 'react'; import { Box, TextField } from 'gestalt'; export default function Example() { const [value, setValue] = useState('****maz@pinterest.com'); return ( <Box padding={8} height="100%" display="flex" alignItems="center" justifyContent="center" > <TextField id="variants-readonly" label="Email address" onChange={(e) => setValue(e.value)} placeholder="Name" value={value} readOnly /> </Box> ); }
Password
TextField with type="password"
shows obfuscated characters by default. An icon button at the end of the field allows the user to toggle password visibility. This creates a more accessible experience by allowing the user to confirm what they have entered before submitting the form.
import { useState } from 'react'; import { Box, TextField } from 'gestalt'; export default function Example() { const [password, setPassword] = useState(''); return ( <Box padding={8} height="100%" display="flex" alignItems="center" justifyContent="center" > <TextField id="enter-password" label="Account password" onChange={({ value }) => setPassword(value)} placeholder="Password" type="password" value={password} /> </Box> ); }
Disabled
disabled
TextFields cannot be interacted with using the mouse or keyboard. They also do not need to meet contrast requirements, so do not use them to present info to the user (use readOnly
instead).
import { useState } from 'react'; import { Box, TextField } from 'gestalt'; export default function Example() { const [value, setValue] = useState(''); return ( <Box padding={8} height="100%" display="flex" alignItems="center" justifyContent="center" > <TextField disabled id="variants-disabled" label="New password" onChange={(e) => { setValue(e.value); }} placeholder="6-18 characters" value={value} /> </Box> ); }
Error message
TextField can display an error message. Simply pass in an errorMessage
when there is an error present and TextField will handle the rest.
Don't use errorMessage
to provide feedback on character count errors. See the maximum length variant for more details.
import { useState } from 'react'; import { Box, TextField } from 'gestalt'; export default function Example() { const [value, setValue] = useState(''); return ( <Box padding={8} height="100%" display="flex" alignItems="center" justifyContent="center" > <TextField errorMessage={!value ? "This field can't be blank!" : null} id="variants-error-message" label="New username" onChange={(e) => { setValue(e.value); }} value={value} /> </Box> ); }
Tags
You can include Tag elements in the input using the tags
prop.
Note that TextField does not internally manage tags. Tag management should be handled in the application state through the component's event callbacks. We recommend creating new tags on enter key presses, and removing them on backspaces when the cursor is in the beginning of the field. We also recommend filtering out empty tags.
This example showcases the recommended behavior. In addition, it creates new tags by splitting the input on spaces, commas, and semicolons.
import { useRef, useState } from 'react'; import { Box, Tag, TextField } from 'gestalt'; export default function Example() { const [value, setValue] = useState(''); const [tags, setTags] = useState(['a@pinterest.com', 'b@pinterest.com']); const ref = useRef(null); const onChangeTagManagement = (e) => { // Create new tags around spaces, commas, and semicolons. const tagInput = e.value.split(/[\\s,;]+/); if (tagInput.length > 1) { setTags([ ...tags, // Avoid creating a tag on content after the separators, and filter out // empty tags ...tagInput.splice(0, tagInput.length - 1).filter((val) => val !== ''), ]); } setValue(tagInput[tagInput.length - 1]); }; const onKeyDownTagManagement = ({ event: { keyCode, currentTarget: { selectionEnd }, }, }) => { if (keyCode === 8 /* Backspace */ && selectionEnd === 0) { // Remove tag on backspace if the cursor is at the beginning of the field setTags([...tags.slice(0, -1)]); } else if (keyCode === 13 /* Enter */ && value.trim() !== '') { // Create a new tag on enter setTags([...tags, value.trim()]); setValue(''); } }; const renderedTags = tags.map((tag, idx) => ( <Tag key={tag} onRemove={() => { const newTags = [...tags]; newTags.splice(idx, 1); setTags([...newTags]); ref.current?.focus(); }} accessibilityRemoveIconLabel={`Remove ${tag} tag`} text={tag} /> )); return ( <Box padding={8} height="100%" display="flex" alignItems="center" justifyContent="center" > <Box padding={2} color="light"> <TextField autoComplete="off" id="variants-tags" label="Emails" ref={ref} onChange={onChangeTagManagement} onKeyDown={onKeyDownTagManagement} tags={renderedTags} value={value} /> </Box> </Box> ); }
Mobile
TextField supports some props to improve the mobile experience. Browsers display virtual keyboard when the user interacts with TextField. enterKeyHint
and inputMode
allow customizing the virtual keyboard for a better data input.
The mobileEnterKeyHint
prop presents to the user a more accurate action label for the enter key on virtual keyboards. These are the values for each use case:
- "enter": inserting a new line
- "done": there is nothing more to input and the input editor will be closed
- "go": taking the user to the target of the text they typed
- "next": taking the user to the next field that will accept text
- "previous": taking the user to the previous field that will accept text
- "search": taking the user to the results of searching for the text they have typed
- "send": delivering the text to its target
The mobileInputMode
prop presents to the user a more accurate action label for the enter key on virtual keyboards. These are the values for each use case:
- "none": No virtual keyboard. For when the page implements its own keyboard input control, for example DatePicker displays the calendar picker.
- "text": Standard input keyboard for the user's current locale.
- "decimal": Fractional numeric input keyboard containing the digits and decimal separator for the user's locale (typically "." or ",").
- "numeric": Numeric input keyboard, but only requires the digits 0–9.
Use type
when TextField needs to capture phone numbers, emails or URLs.
import { Box, Flex, Image, TextField } from 'gestalt'; export default function Example() { return ( <Box padding={8} height="100%" display="flex" alignItems="center" justifyContent="center" > <Flex gap={2}> <TextField id="enterKeyHint" mobileEnterKeyHint="next" label="Text virtual keyboard with 'next'" onChange={() => {}} onBlur={() => {}} onFocus={() => {}} /> <Box height={100} width={200}> <Image alt="Image of a screenshot of a virtual keyboard on a mobile screen showing a text virtual keyboard with 'next'" naturalHeight={1} naturalWidth={1} src="https://i.ibb.co/qdMLb8t/IMG-2518.jpg" /> </Box> </Flex> </Box> ); }
import { Box, Flex, Image, TextField } from 'gestalt'; export default function Example() { return ( <Box padding={8} height="100%" display="flex" alignItems="center" justifyContent="center" > <Flex gap={2}> <TextField id="decimal" mobileInputMode="decimal" label="Decimal virtual keyboard" onChange={() => {}} onBlur={() => {}} onFocus={() => {}} /> <Box height={100} width={200}> <Image alt="Image of a screenshot of a virtual keyboard on a mobile screen showing a decimal virtual keyboard" naturalHeight={1} naturalWidth={1} src="https://i.ibb.co/WxYtCdx/IMG-2520.jpg" /> </Box> </Flex> </Box> ); }
import { Box, Flex, Image, TextField } from 'gestalt'; export default function Example() { return ( <Box padding={8} height="100%" display="flex" alignItems="center" justifyContent="center" > <Flex gap={2}> <TextField id="none" mobileInputMode="numeric" label="Numeric virtual keyboard" type="date" onChange={() => {}} onBlur={() => {}} onFocus={() => {}} /> <Box height={100} width={200}> <Image alt="Image of a screenshot of a virtual keyboard on a mobile screen showing a numeric virtual keyboard" naturalHeight={1} naturalWidth={1} src="https://i.ibb.co/tpZ9pV8/IMG-2519.jpg" /> </Box> </Flex> </Box> ); }
import { Box } from 'gestalt'; import { DatePicker } from 'gestalt-datepicker'; export default function Example() { return ( <Box padding={8} height="100%" display="flex" alignItems="center" justifyContent="center" > <DatePicker id="datepicker" label="No virtual keyboard" onChange={() => {}} /> </Box> ); }
Maximum length
Textfield supports the native maxlength input attribute. maxLength
sets the maximum number of characters allowed to be entered by the user in Textfield. maxLength
must be an integer value 0 or higher.
The user cannot exceed the maximum number of characters interacting with the component. Whenever possible, avoid setting initial values from the parent component's state that already exceed the maxLength
.
When maxLength
is passed to TextField, the component displays a character counter as well as a warning or problem Status when the user reaches or the prepopulated controlled value exceeds the maximum length of characters.
The first example shows an empty Textfield with maxLength
set to 20 characters. The second example shows the warning and problem Status.
import { useState } from 'react'; import { Box, TextField } from 'gestalt'; export default function TextFieldExample() { const [value, setValue] = useState(''); const characterCount = 20; return ( <Box padding={8} height="100%" display="flex" alignItems="center" justifyContent="center" > <TextField id="maxLength" label="Title" helperText="Enter a title that captures the imagination of Pinners" onChange={(e) => setValue(e.value)} placeholder="Enter your pin title" value={value} onBlur={() => {}} onFocus={() => {}} maxLength={{ characterCount, errorAccessibilityLabel: 'Limit reached. You can only use 20 characters in this field.', }} /> </Box> ); }
import { useState } from 'react'; import { Box, Flex, TextField } from 'gestalt'; export default function TextFieldExample() { const [valueA, setValueA] = useState('Delicious vegan soup'); const [valueB, setValueB] = useState('Delicious vegan noodle soup'); const characterCount = 20; const errorAccessibilityLabel = 'Limit reached. You can only use 20 characters in this field.'; return ( <Box padding={8} height="100%" display="flex" alignItems="center" justifyContent="center" > <Flex direction="column" gap={12}> <TextField id="maxLengthReached" label="Title" helperText="Enter a title that captures the imagination of Pinners" onChange={({ value }) => setValueA(value)} placeholder="Enter your pin title" value={valueA} onBlur={() => {}} onFocus={() => {}} maxLength={{ characterCount, errorAccessibilityLabel }} /> <TextField id="maxLengthExceeded" label="Title" helperText="Enter a title that captures the imagination of Pinners" onChange={({ value }) => setValueB(value)} placeholder="Enter your pin title" value={valueB} onBlur={() => {}} onFocus={() => {}} maxLength={{ characterCount, errorAccessibilityLabel }} /> </Flex> </Box> ); }
Refs
TextField can accept a ref for anchoring Popover-based components.
import { useRef, useState } from 'react'; import { Box, Popover, Text, TextField } from 'gestalt'; export default function TextFieldPopoverExample() { const [open, setOpen] = useState(false); const anchorRef = useRef(null); return ( <Box padding={8} height="100%" display="flex" alignItems="center" justifyContent="center" > <Box padding={2} color="light"> <TextField id="variants-refs" label="Focus the TextField to show the Popover" onChange={() => {}} onBlur={() => { setOpen(false); }} onFocus={() => { setOpen(true); }} ref={anchorRef} /> {open && ( <Popover anchor={anchorRef.current} idealDirection="down" onDismiss={() => { setOpen(false); }} shouldFocus={false} size="md" > <Box padding={3}> <Text weight="bold">Example with Popover</Text> </Box> </Popover> )} </Box> </Box> ); }
Component quality checklist
Quality item | Status | Status description |
---|---|---|
Figma Library | Ready | Component is available in Figma for web and mobile web. |
Responsive Web | Ready | Component responds to changing viewport sizes in web and mobile web. |
Related
TextArea
When users need to enter long amounts of text, use TextArea to ensure the full content will be shown.
NumberField
For numerical input, use NumberField. Exceptions: for telephone numbers, use <TextField type="tel" />
. And for numerical input with possible leading 0's (e.g. ZIP codes), use <TextField type="text" />
.
SearchField
If the input is used for searching content, use SearchField.