Text area
A text area lets users enter long form text which spans over multiple lines.Default
The default text area.
import React from 'react';
import { Label } from '@atlaskit/form/label/default';
import TextArea from '@atlaskit/textarea/text-area';
export default (): React.JSX.Element => (
<>
<Label htmlFor="area">Share your feedback</Label>
<TextArea id="area" resize="auto" maxHeight="20vh" name="area" defaultValue="" />
</>
);Form
You'll often use text areas as a form field.
import React from 'react';
import Button from '@atlaskit/button/default/button';
import Form from '@atlaskit/form/form';
import Field from '@atlaskit/form/field';
import { FormFooter } from '@atlaskit/form/form-footer';
import TextArea from '@atlaskit/textarea/text-area';
export default function TextAreaFormExample(): React.JSX.Element {
return (
<Form onSubmit={(formState: unknown) => console.log('form submitted', formState)}>
<Field
label="Field label"
name="example-text"
helperMessage="Help or instruction text goes here"
component={({ fieldProps }: any) => <TextArea {...fieldProps} />}
/>
<FormFooter>
<Button type="submit" appearance="primary">
Submit
</Button>
</FormFooter>
</Form>
);
}Validation
This is how the text area will behave within forms.
Validation displays an error message related to the restrictions of the text area.
When a user selects the text area and starts typing or changing content, the focus color will change to blue. When validating text areas in real-time, message icons switch based on the message type. For example, helper text becomes an error message when the input content doesn't meet the criteria. Error and warning messages disappear when the criteria is met.
Keep helper text as short as possible. For complex information, provide a link to more information in a new browser tab. For more help, use the messaging guidelines.
import React from 'react';
import Button from '@atlaskit/button/default/button';
import Form from '@atlaskit/form/form';
import Field from '@atlaskit/form/field';
import { FormFooter } from '@atlaskit/form/form-footer';
import TextArea from '@atlaskit/textarea/text-area';
function validate(value: unknown) {
if (value !== 'open sesame') {
return 'This field is required. Try entering text in this field.';
}
return undefined;
}
export default function TextAreaFormValidationExample(): React.JSX.Element {
const handleSubmit = (formState: { command: string }) => {
console.log('form state', formState);
};
return (
<Form onSubmit={handleSubmit} name="validation-example">
{' '}
<Field
label="Description"
isRequired
name="command"
validate={validate}
defaultValue=""
helperMessage="Your description will be added to the board."
component={({ fieldProps }: any) => <TextArea {...fieldProps} />}
/>
<FormFooter>
<Button type="submit" appearance="primary">
Submit
</Button>
</FormFooter>
</Form>
);
}Resize
Use the resize prop to set whether the text area expands when the user enters text that exceeds
the size of the text area.
Smart
Use smart for a text area that shows all user input at once. Overflow text wraps onto a new line
and expands the text area. This is the default sizing option.
Auto
Use auto for a text area that will resize horizontally and vertically.
Vertical / horizontal resize
Use vertical or horizontal for a text area that will resize either vertically only or
horizontally only.
None
Use none for a text area that does not resize and uses a scroll bar if the user enters text that
exceeds the size of the text area.
import { cssMap, cx, jsx } from '@compiled/react';
import { Label } from '@atlaskit/form/label/default';
import { Box } from '@atlaskit/primitives/compiled';
import TextArea from '@atlaskit/textarea/text-area';
const wrapperStyles = cssMap({
root: {
maxWidth: '500px',
},
});
const _default: () => JSX.Element = () => (
<Box id="resize" xcss={cx(wrapperStyles.root)}>
<Label htmlFor="resize-auto">Resize: auto</Label>
<TextArea resize="auto" name="resize-auto" id="resize-auto" testId="autoResizeTextArea" />
<Label htmlFor="resize-vertical">Resize: vertical</Label>
<TextArea
resize="vertical"
name="resize-vertical"
id="resize-vertical"
testId="verticalResizeTextArea"
/>
<Label htmlFor="resize-horizontal">Resize: horizontal</Label>
<TextArea
resize="horizontal"
name="resize-horizontal"
id="resize-horizontal"
testId="horizontalResizeTextArea"
/>
<Label htmlFor="resize-smart">Resize: smart (default)</Label>
<TextArea name="resize-smart" id="resize-smart" testId="smartResizeTextArea" />
<Label htmlFor="resize-none">Resize: none</Label>
<TextArea resize="none" name="resize-none" id="resize-none" testId="noneResizeTextArea" />
</Box>
);
export default _default;Appearance
Standard
The default text area appearance.
import React from 'react';
import { Label } from '@atlaskit/form/label/default';
import TextArea from '@atlaskit/textarea/text-area';
export default function TextAreaAppearanceStandard(): React.JSX.Element {
return (
<>
<Label htmlFor="standard-appearance">Standard appearance</Label>
<TextArea
appearance="standard"
id="standard-appearance"
name="standard-appearance"
placeholder=""
/>
</>
);
}Subtle
A text area that's transparent until interaction or error.
import React from 'react';
import { Label } from '@atlaskit/form/label/default';
import TextArea from '@atlaskit/textarea/text-area';
export default function TextAreaAppearanceSubtle(): React.JSX.Element {
return (
<>
<Label htmlFor="appearance-subtle">Subtle appearance</Label>
<TextArea
appearance="subtle"
id="appearance-subtle"
name="appearance-subtle"
placeholder=""
/>
</>
);
}Character counter
A character counter field provides real-time feedback about text length as people type, showing how many characters are remaining or have been exceeded.
Use it when there are constraints on text length, such as database limits, technical requirements, or design constraints.