Textarea

Components

Textarea

Textarea is a themed version of the native textarea element with an enhanced API for formatting and accessibility.

Always use a component to identify and describe the purpose of a text area.

import { Textarea } from '@sproutsocial/racine'

() => {
  const [value, setValue] = useState("")

  return (
    <Box>
      <Label htmlFor='resume'>
        Resumé
      </Label>

      <Textarea
        value={value}
        onChange={e => setValue(e.target.value)}
        id='resume'
        name='resume'
      />
    </Box>
  )
}

Properties

Name	Type	Default	Description
`id`	`string`		ID of the form element, should match the "for" value of the associated label
`name`	`string`
`ariaLabel`	`string`		Label used to describe the input if not used with an accompanying visual label
`ariaDescribedby`	`string`		Attribute used to associate other elements that describe the Textarea, like an error
`value`	`string`		Current value of the textarea
`autoFocus`	`boolean`		Will autofocus the element when mounted to the DOM
`disabled`	`boolean`		HTML disabled attribute
`readOnly`	`boolean`		HTML readonly attribute
`isInvalid`	`boolean`		Whether or not the current contents of the input are invalid
`placeholder`	`string`		Placeholder text for when value is undefined or empty
`required`	`boolean`		HTML required attribute
`elemBefore`	`React.ReactNode`		16x16 element, such as an icon
`elemAfter`	`React.ReactNode`		16x16 element, such as an icon
`maxLength`	`number`		Max length of the input
`enableSpellcheck`	`boolean`		HTML spellcheck attribute
`enableResize`	`boolean`		Makes the text area vertically resizable
`rows`	`number`	`4`	The number of visible lines of text without scrolling
`qa`	`object`
`inputProps`	`React.ComponentPropsWithoutRef<"textarea">`		Props to spread onto the underlying textarea element
`innerRef`	`\| { current: null \| HTMLTextAreaElement; }`		Used to get a reference to the underlying element
`onBlur`	`(e: React.FocusEvent<HTMLTextAreaElement>) => void`
`onChange`	`(e: React.SyntheticEvent<HTMLTextAreaElement>) => void`
`onFocus`	`(e: React.FocusEvent<HTMLTextAreaElement>) => void`
`onKeyDown`	`(e: React.SyntheticEvent<HTMLTextAreaElement>) => void`
`onKeyUp`	`(e: React.SyntheticEvent<HTMLTextAreaElement>) => void`

Recipes

Textarea with character counter

Note the usage of component nested inside , this is done to convey to screen-reader users there is a character limit associated with the textarea.

() => {
  const [value, setValue] = useState("")

  return (
    <Box>
      <Label htmlFor='resume'>
        Resumé <VisuallyHidden>(100 characters)</VisuallyHidden>
      </Label>

      <Textarea
        value={value}
        onChange={e => setValue(e.target.value)}
        id='resume'
        name='resume'
        elemAfter={
          <CharacterCounter currentValue={value.length} maxValue={100} />
        }
      />
    </Box>
  )
}

With placeholder text

Use of placeholder text is generally discouraged.

() => {
  const [value, setValue] = useState("")

  return (
    <Box>
      <Label htmlFor='resume'>
        Resumé
      </Label>

      <Textarea
        value={value}
        onChange={e => setValue(e.target.value)}
        id='resume'
        name='resume'
        placeholder='Your resume details...'
        elemAfter={
          <CharacterCounter currentValue={value.length} maxValue={100} />
        }
      />
    </Box>
  )
}