Textarea

Area where user can enter larger amounts of text. Commonly used in forms.

Rails
React

Default

Code Example

import React from 'react'
import { Textarea } from '../../'

const TextareaDefault = () => {
  return (
    <div>
      <Textarea
          label="Label"
          rows={4}
      />

      <br />

      <Textarea
          label="Label"
          placeholder="Placeholder text"
      />

      <br />

      <Textarea
          label="Label"
          name="comment"
          placeholder="Placeholder text"
          value="Default value text"
      />

    </div>
  )
}

export default TextareaDefault

Custom Textarea Input

Code Example

import React from 'react'
import { Textarea } from '../../'

const TextareaCustom = () => {
  return (
    <div>
      <Textarea label="Label">
        <textarea
            className="my_custom_class"
            name="custom_textarea"
            rows={4}
        >
          {'Content goes here.'}
        </textarea>
      </Textarea>
    </div>
  )
}

export default TextareaCustom

Dark

Code Example

import React from 'react'
import { Textarea } from '../../'

const TextareaDark = () => {
  return (
    <div>
      <Textarea
          dark
          label="Label"
          rows={4}
      />

      <br />

      <Textarea
          dark
          label="Label"
          placeholder="Placeholder text"
      />

      <br />

      <Textarea
          dark
          label="Label"
          name="comment"
          placeholder="Placeholder text"
          value="Default value text"
      />

    </div>
  )
}

export default TextareaDark

Resize

Code Example

import React from 'react'
import { Textarea } from '../../'

const TextareaResize = () => {
  return (
    <div>
      <Textarea
          label="vertical"
          placeholder="Resize Vertical"
          resize="vertical"
      />

      <br />

      <Textarea
          label="both"
          placeholder="Resize Both"
          resize="both"
      />

      <br />

      <Textarea
          label="horizontal"
          placeholder="Resize Horizontal"
          resize="horizontal"
      />

    </div>
  )
}

export default TextareaResize

Textarea w/ Error

Textarea w/ Error shows that the radio option must be selected or is invalid (ie when used in a form it signals a user to fix an error).

Code Example

import React from 'react'
import { Textarea } from '../..'

const TextareaError = () => {
  return (
    <div>
      <Textarea
          error="This field has an error!"
          label="Label"
          name="comment"
          placeholder="Placeholder text"
          value="Default value text"
      />

    </div>
  )
}

export default TextareaError

Textarea w/ Error

Code Example

import React from 'react'
import { Textarea } from '../..'

const TextareaDarkError = () => {
  return (
    <div>
      <Textarea
          dark
          error="This field has an error!"
          label="Label"
          name="comment"
          placeholder="Placeholder text"
          value="Default value text"
      />

    </div>
  )
}

export default TextareaDarkError

Things to Avoid

Do not use for small text amounts (use Text Input instead). Avoid using textarea without validation if it is required and using with validation if not required.

5.3.0

Textarea

Things to Avoid