TextField
To add the TextField
component to your app:
import {TextField} from '@stripe/ui-extension-sdk/ui';
<TextField label="Business name" placeholder="Acme Inc…" onChange={(e) => { console.log(e.target.value); }} />
Props
Prop | Type | Description |
---|---|---|
aria-label |
| Text that describes the control. Only visible to screen readers, and is not clickable. Should not be used if `label` is set. |
autoComplete |
| |
autoFocus |
| |
defaultValue |
| |
description |
| Descriptive text that will be rendered adjacent to the control's label. |
disabled |
| |
error |
| Error text that will be rendered below the control. |
form |
| |
hiddenElements |
| Visually hides the specified elements. The hidden elements will still be present and visible to screen readers. |
invalid |
| Programmatically mark the value as invalid |
label |
| Text that describes the control. Will be both visible and clickable. |
maxLength |
| |
minLength |
| |
name |
| |
onChange |
| |
onKeyDown |
| |
onKeyUp |
| |
placeholder |
| |
readOnly |
| |
required |
| |
size |
| The size of the input |
spellCheck |
| |
tabIndex |
| |
type |
| Choose between the text-alike types on an input |
onKeyPress Deprecated |
|
CSS
TextField
components support these CSS properties:
Property | Type | Example |
width | 2/3 | |
Field width. See Sizing for details. |
TextField
components don’t support other CSS. Style them using their props instead.
Invalid
You can mark a TextField
component as invalid by setting the invalid
prop on the element. This is purely visual. The default is false
.
<TextField label="Current year" defaultValue="1892" invalid />
Type
type
behaves like the type attribute on an <input />
, but is restricted to types that allow text. The default is text
.
<TextField label="Text" type="text" /> <TextField label="Password" type="password" /> <TextField label="Search" type="search" /> <TextField label="Number" type="number" />
Size
Changing the size
allows you to choose variants with slightly more or slightly less room than the default. In general you don’t want to mix and match different sizes within the same form. The default is medium
.
<TextField label="Small" size="small" /> <TextField label="Medium" size="medium" /> <TextField label="Large" size="large" />
Disabled and read only
You can mark a field as disabled
, which prevents any interaction and changes the styling. Disabled means that no data from that form element is submitted when the form is submitted.
You can also make a field as readOnly
. Read-only means any data from within the element will be submitted, but the user can’t change it.
<TextField label="Disabled" defaultValue="Field is disabled" disabled /> <TextField label="Readonly" defaultValue="Field is readonly" readOnly />
State management
Use the TextField
component as an uncontrolled input:
<TextField onChange={(e) => { console.log(e); }} label="First name" />
Width
Set the width of a TextField
component using the available values with the css
prop:
<TextField css={{width: 'fill'}} />