TextArea

TextArea description.

Props

TextArea properties

Property	Description	Type	Default
disabled	Is input disabled?	`boolean`	false
helperText	Input helper text	`string`	-
label	Input label text	`string`	-
maxlength	Textarea maximum length	`number`	-
name	Input name	`string`	-
placeholder	Input placeholder text	`string`	-
required	Is input required?	`boolean`	false
resizable	Should textarea be resizable?	`boolean`	false
rows	How many rows should the text area have?	`number`	4
wrap	How should the text area wrap?	`hard` `soft`	`hard`

Usage

Basic TextArea

import { TextArea, BrowserWindow } from 'camara';

render(
  <BrowserWindow docs>
    <TextArea placeholder="Type something here" />
  </BrowserWindow>
);

import { TextArea, BrowserWindow } from 'camara';

render(
  <BrowserWindow docs>
    <TextArea placeholder="Type something here" />
  </BrowserWindow>
);

Helper Text

import { Flex, TextArea, BrowserWindow } from 'camara';

render(
  <BrowserWindow docs>
    <Flex>
      <TextArea label="Description" helperText="example@gmail.com" />
      <TextArea
        label="What's on your mind?"
        helperText="must contain special characters"
      />
    </Flex>
  </BrowserWindow>
);

import { Flex, TextArea, BrowserWindow } from 'camara';

render(
  <BrowserWindow docs>
    <Flex>
      <TextArea label="Description" helperText="example@gmail.com" />
      <TextArea
        label="What's on your mind?"
        helperText="must contain special characters"
      />
    </Flex>
  </BrowserWindow>
);

Required

import { Flex, TextArea, BrowserWindow } from 'camara';

render(
  <BrowserWindow docs>
    <Flex>
      <TextArea required label="First Name" />
      <TextArea required label="Last Name" />
    </Flex>
  </BrowserWindow>
);

import { Flex, TextArea, BrowserWindow } from 'camara';

render(
  <BrowserWindow docs>
    <Flex>
      <TextArea required label="First Name" />
      <TextArea required label="Last Name" />
    </Flex>
  </BrowserWindow>
);

Hidden Label

import { Flex, TextArea, BrowserWindow } from 'camara';

render(
  <BrowserWindow docs>
    <Flex>
      <TextArea required placeholder="First Name" />
      <TextArea required placeholder="Last Name" />
    </Flex>
  </BrowserWindow>
);

import { Flex, TextArea, BrowserWindow } from 'camara';

render(
  <BrowserWindow docs>
    <Flex>
      <TextArea required placeholder="First Name" />
      <TextArea required placeholder="Last Name" />
    </Flex>
  </BrowserWindow>
);

Disabled

import { Flex, TextArea, BrowserWindow } from 'camara';

render(
  <BrowserWindow docs>
    <Flex>
      <TextArea disabled required placeholder="First Name" />
      <TextArea disabled required placeholder="Last Name" />
    </Flex>
  </BrowserWindow>
);

import { Flex, TextArea, BrowserWindow } from 'camara';

render(
  <BrowserWindow docs>
    <Flex>
      <TextArea disabled required placeholder="First Name" />
      <TextArea disabled required placeholder="Last Name" />
    </Flex>
  </BrowserWindow>
);

Resizable

import { Flex, TextArea, BrowserWindow } from 'camara';

render(
  <BrowserWindow docs>
    <Flex>
      <TextArea resizable required placeholder="First Name" />
      <TextArea resizable required placeholder="Last Name" />
    </Flex>
  </BrowserWindow>
);

import { Flex, TextArea, BrowserWindow } from 'camara';

render(
  <BrowserWindow docs>
    <Flex>
      <TextArea resizable required placeholder="First Name" />
      <TextArea resizable required placeholder="Last Name" />
    </Flex>
  </BrowserWindow>
);