Textarea

Similar to the TextInput, texareas are primarily used to enter and edit text in forms. The main difference is that textareas support multiple lines.

Props

className

String

disabled

Bool

false

error

Bool

false

forwardedRef

Custom

name

String

required

onChange

Func

required

value

String

Examples

Default Usage

<State initial={{ value: '' }}>
  {({ state, setState }) => (
    <Textarea
      error={state.value.length > 5}
      name="textarea"
      onChange={(name, value) => setState({ value })}
      placeholder="Enter a description"
      value={state.value}
    />
  )}
</State><State initial={{ value: '' }}>
  {({ state, setState }) => (
    <Textarea
      error={state.value.length > 5}
      name="textarea"
      onChange={(name, value) => setState({ value })}
      placeholder="Enter a description"
      value={state.value}
    />
  )}
</State>

Error Modifier

<Textarea
  error
  name="textarea"
  onChange={() => {}}
  value="This textarea has an error"
/><Textarea
  error
  name="textarea"
  onChange={() => {}}
  value="This textarea has an error"
/>

Disabled Modifier

<Textarea
  disabled
  name="textarea"
  onChange={() => {}}
  value="This textarea cannot be modified"
/><Textarea
  disabled
  name="textarea"
  onChange={() => {}}
  value="This textarea cannot be modified"
/>

Textarea

.css-1r0pe6c{color:inherit;-webkit-text-decoration:none;text-decoration:none;}.css-1r0pe6c:hover{-webkit-text-decoration:underline;text-decoration:underline;}Props

Examples

Default Usage

Error Modifier

Disabled Modifier

Props