Collection of theme-ui and external components.
created:3/15/2021
updated:3/15/2021
source lines:25
comments %:0

Textarea

theme-ui
0.6.0-alpha.7

Form textarea component

Textarea variants can be defined in

theme.forms
and the component uses the
theme.forms.textarea
variant by default.

Component

import { Textarea } from 'theme-ui';

Overview

({ rows }) => (
<Textarea
rows={rows}
defaultValue={`Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Fusce in metus velit.
In purus neque, mattis non vehicula a, facilisis a leo.
Mauris varius turpis quis tortor cursus convallis.
Duis sapien dui, consequat sed vestibulum et, posuere sed mauris.
Duis pretium eu velit ac fermentum.
Vestibulum et lacus eu erat interdum lobortis.
Proin placerat leo orci, ut placerat magna egestas sit amet.
Sed vitae orci aliquam, elementum leo vestibulum, mollis arcu.
Pellentesque dignissim mattis leo id eleifend.
Nullam egestas purus vitae nisl vestibulum scelerisque.
Donec porttitor velit eu sollicitudin scelerisque.
Suspendisse quis aliquet lacus, nec lacinia tellus.`}
/>
)

Controls

Name
Description
Default
Controls
rows
number
-

Properties

Name
Description
Default
BoxOwnProps (4 properties)
as
ElementType<any>
-
variant
string
-
css
Interpolation<any>
-
sx
ThemeUIStyleObject
-
SpaceProps (28 properties)
TextareaHTMLAttributes (16 properties)
HTMLAttributes (43 properties)
OpacityProps (1 properties)
AriaAttributes (48 properties)
DOMAttributes (160 properties)
Attributes (1 properties)
BackgroundColorProps (2 properties)
RefAttributes (1 properties)

External dependencies

package
imports
peer
react
React

Internal dependencies

file
imports
"./Box"

Component JSX