TextArea
To add the TextArea
component to your app:
import {TextArea} from '@stripe/ui-extension-sdk/ui';
<TextArea label="Description" placeholder="Acme Inc was founded in…" defaultValue="Stripe Apps lets you embed custom…" 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 |
| |
cols |
| |
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 |
| |
resizeable |
| Allow the user to resize the textarea |
rows |
| Rows of text that are visible in the input |
size |
| The size of the input |
spellCheck |
| |
tabIndex |
| |
wrap |
| |
onKeyPress Deprecated |
|
CSS
TextArea
components support these CSS properties:
Property | Type | Example |
width | 2/3 | |
Text area width. See Sizing for details. |
TextArea
components don’t support other CSS. Style them using their props instead.
Invalid
You can mark a TextArea
as invalid by setting the invalid
prop on the element. This is purely visual. It defaults to false
.
<TextArea label="Favorite word" defaultValue="Stripe Apps lets you embed custom…" invalid />
Resizeable
By default, TextArea
is vertically resizable. Users who need more space typically prefer this. If you need to prevent the element from resizing, set resizeable
to false
.
<TextArea label="Resizable bio" defaultValue="Stripe Apps lets you embed custom…" /> <TextArea label="Unresizable bio" resizeable={false} defaultValue="Stripe Apps lets you embed custom…" />
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
.
<TextArea label="Description (large)" size="large" defaultValue="Stripe Apps lets you embed custom…" /> <TextArea label="Description (medium, default)" size="medium" defaultValue="Stripe Apps lets you embed custom…" /> <TextArea label="Description (small)" size="small" defaultValue="Stripe Apps lets you embed custom…" />
Disable 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 is submitted, but the user can’t change it.
<TextArea label="Disabled" defaultValue="Stripe Apps lets you embed custom…" disabled /> <TextArea label="Readonly" defaultValue="Stripe Apps lets you embed custom…" readOnly />
Rows
A TextArea
uses rows to control its height rather than using a traditional height in pixels, just like a regular <TextArea />
. This allows the element to size itself based on multiples of the font size, rather than a raw pixel value. It prevents text from being partially obscured by default.
The vertical height of your TextArea
component also changes depending on what size value you set, because that changes the line height of the text inside the input.
<TextArea label="Description (3 rows, default)" defaultValue="Stripe Apps lets you embed custom…" /> <TextArea label="Description (6 rows)" rows={6} defaultValue="Stripe Apps lets you embed custom…" />
State management
Use the TextArea
component as an uncontrolled input:
<TextArea onChange={(e) => { console.log(e); }} label="About your business" placeholder="Our business is…" />
Width
Set the width of a TexaArea
component using the available values with the css
prop:
<TextArea css={{width: 'fill'}} />