text-area

import { TextArea } from "woly";

TextArea defines a multi-line text input control.

TextArea is often used in a form, to collect user inputs like comments or reviews.

Example

<Playground>
  <block.S>
    <TextArea
      name="name"
      placeholder="Simple text-area"
      onChange={() => console.info('On textarea change')}
      priority="secondary"
      resize
    />
  </block.S>
</Playground>

Priorities

Primary and danger priorities are should be used to focus user attention.

<Playground direction="horizontal">
  <block.L>
    <TextArea
      name="name"
      placeholder="Primary"
      onChange={() => console.info('On textarea change')}
      priority="primary"
    />
  </block.L>
  <block.L>
    <TextArea
      name="name"
      placeholder="Error"
      value="Error"
      onChange={() => console.info('On textarea change')}
      priority="danger"
    />
  </block.L>
</Playground>

Secondary and default priority should be used as a default priority.

<Playground direction="horizontal">
  <block.S>
    <TextArea
      name="name"
      placeholder="Primary"
      onChange={() => console.info('On textarea change')}
      priority="secondary"
    />
  </block.S>
  <block.S>
    <TextArea
      name="name"
      placeholder="Default"
      onChange={() => console.info('On textarea change')}
      priority="default"
    />
  </block.S>
</Playground>

Disabled

This Boolean attribute indicates that the user cannot interact with the control. If this attribute is not specified, the control inherits its setting from the containing element; if there is no containing element when the disabled attribute is set, the control is enabled.

<Playground>
  <block.L>
    <TextArea name="name" placeholder="Disabled" priority="default" disabled />
  </block.L>
  <block.L>
    <TextArea
      name="name"
      value="Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
      Phasellus convallis lacus non est porta interdum."
      priority="default"
      disabled
      resize
    />
  </block.L>
</Playground>

Resize

The resize property defines if (and how) an element is resizable by the user.

<Playground>
  <block.L style={{ marginBottom: '60px' }}>
    <TextArea
      name="name"
      placeholder="Here, the user can resize both the height and width"
      onChange={() => console.info('On textarea change')}
      priority="primary"
      rows={5}
      resize
    />
  </block.L>
  <block.L style={{ marginBottom: '40px' }}>
    <TextArea
      name="name"
      placeholder="Oops! You can't resize this textarea"
      onChange={() => console.info('On textarea change')}
      priority="primary"
    />
  </block.L>
</Playground>

Cols, rows and wrap

TextArea size can be controlled with number of cols and rows.

cols

The visible width of the text control, in average character widths. If it is specified, it must be a positive integer. If it is not specified, the default value is 20.

rows

The number of visible text lines for the control.

wrap

Indicates how the control wraps text. Possible values are:

  • hard: The browser automatically inserts line breaks, so that each line has no more than the width of the control; the cols attribute must also be specified for this to take effect.

  • soft: The browser ensures that all line breaks in the value consist of a CR+LF pair, but does not insert any additional line breaks.

  • off : Like soft but changes appearance to white-space: pre so line segments exceeding cols are not wrapped and the textarea becomes horizontally scrollable.

<Playground>
  <block.L>
    <TextArea
      name="name"
      placeholder="Hey! Here is 20 cols and it's wrapp off"
      onChange={() => console.info('On textarea change')}
      priority="primary"
      cols={20}
      wrap="off"
    />
  </block.L>
  <block.L>
    <TextArea
      name="name"
      placeholder="Oops! Textarea consists only 3 rows"
      onChange={() => console.info('On textarea change')}
      priority="primary"
      rows={3}
    />
  </block.L>
</Playground>

Sizes

Size controlled by the component-level block property not from the props.

<Playground>
  <block.S>
    <TextArea
      name="name"
      placeholder="Primary"
      onChange={() => console.info('On textarea change')}
      priority="primary"
    />
  </block.S>
  <block.M>
    <TextArea
      name="name"
      placeholder="Primary"
      onChange={() => console.info('On textarea change')}
      priority="primary"
    />
  </block.M>
  <block.L>
    <TextArea
      name="name"
      placeholder="Primary"
      onChange={() => console.info('On textarea change')}
      priority="primary"
    />
  </block.L>
  <block.XL>
    <TextArea
      name="name"
      placeholder="Primary"
      onChange={() => console.info('On textarea change')}
      priority="primary"
    />
  </block.XL>
</Playground>

Container

TextArea can be placed inside the container. TextArea width is equal to container size.

<Playground direction="horizontal">
  <block.S>
    <TextArea
      name="name"
      placeholder="Primary"
      onChange={() => console.info('On textarea change')}
      priority="primary"
    />
  </block.S>
  <block.L>
    <TextArea
      name="name"
      placeholder="Primary"
      onChange={() => console.info('On textarea change')}
      priority="primary"
    />
  </block.L>
</Playground>

Props

NameTypeDefaultDescription
colsnumberNumber of cols to display
disabledbooleannullHTML disabled attribute
maxLengthnumberThe maxlength attribute specifies the maximum length (in characters)
minLengthnumberThe minlength attribute specifies the maximum length (in characters)
namestringName attribute specifies a name of the text-area
onChange(e: React.ChangeEvent<HTMLInputElement>) => unknownCallback when user text-area
onKeyDown(event: React.KeyboardEvent<HTMLTextAreaElement>) => unknownCallback when user text-area
overflowbooleanThe overflow property specifies what should happen if content overflows an element's box
placeholderstringThe placeholder represents the placeholder text
prioritystring'secondary'Priority prop to style TextArea component
resizestringThe resize property defines if (and how) an element is resizable by the user
rownumberNumber of rows to display
valueHTMLInputElement['value']nullValue of text-area field
wrapstringThe wrap attribute specifies how the text in a text area is to be wrapped
...HTMLInputElement{}Other props are inherited from HTMLInputElement