TextArea

Form element that allows users to type in single line text. For multi-line text you can use the TextArea component.

Import

// Tree shakable import
import { TextArea } from '@bojagi/pablo';
// Or direct import
import { TextArea } from '@bojagi/pablo/TextArea';

Examples

Simple TextArea

The simples form of an TextArea is just the field itself. You can just pass a useState setter function to update state as the first argument of onChange is the value itself. The second argument is the full onChange event of the native text area element.

Live Editor

() => {
  const [value, setValue] = React.useState('');
  return (
    <TextArea value={value} onChange={setValue} />
  );
}

Result

Loading...

TextArea with label

A simple text area field doesn't really make sense as the context is missing. You can pass the label prop with the content for the label (can be string or JSX).

Live Editor

() => {
  const [description, setDescription] = React.useState('');
  return (
    <TextArea label="Description" value={description} onChange={setDescription} />
  );
}

Result

Loading...

TextArea with additional information

Additionally you can also pass the infoText prop to give hints on how to fill the field.

Live Editor

() => {
  const [name, setName] = React.useState('');
  return (
    <TextArea label="Name" infoText="Your name can be reeeeeeeaaaaaally long!" value={name} onChange={setName} />
  );
}

Result

Loading...

TextArea with error

When you do validation on a field and the user input isn't valid, you can use the error prop and overwrite the infoText content with it.

Live Editor

() => {
  const [description, setDescription] = React.useState('');
  const hasError = React.useMemo(() => description.length && description.includes('\n'));
  return (
    <TextArea label="Description" error={hasError && "Do not write more than one line!"} infoText={"Write something about yourself"} value={description} onChange={setDescription} />
  );
}

Result

Loading...

TextArea with end or start component

Sometimes you want to make the text area more interactive. For this you can use components passed to the end or start prop.

Live Editor

() => {
  const [tweet, setTweet] = React.useState('');
  return (
    <TextArea 
      label="Tweet" 
      value={tweet} 
      onChange={setTweet} 
      end={
        <Box minWidth={40} px={0.5}>
          <InfoText textColor={tweet.length > 140 ? 'negative.main' : 'text.info'}>
            {tweet.length}
          </InfoText>
        </Box>
      } 
    />
  );
}

Result

Loading...

Props

Name	Type	Default Value	Required	Description

Box props

Name	Type	Default Value	Required	Description