TextArea
Textarea is an input that provides the same features as the text field, but accepts multiple lines of text.
Figma Reference
TextArea Usage
import { TextArea } from '@dt-dds/react';
export const App = () => {
return <TextArea label='My text area' maxLength={200} />;
};
Properties
| Property | Type | Default | Description |
|---|---|---|---|
label | string | - | A label to help users understand the scope of the text area. |
name | string | - | The attribute to specify the name of the text area. |
value | string | - | Value of the text area |
dataTestId | string | label-textarea | Customizable test identifier |
maxLength | number | The maximum number of characters that user can enter. | |
onChange | function | - | The triggered function when the input change. |
variant | [outlined,bottomLine] | outlined | Styles the input with outlined or with bottom line |
hasError | boolean | - | Set error state for text field. |
backgroundFill | [default, contrast,light] | default | Styles the input with background color |
enableResize | boolean | false | Enables the vertical resizing |
message | string | - | The message to be displayed below the input field. Useful for hints or to display errors. |
labelVariant | [default, floating] | default | Sets the label floating or traditional on top of the input |
hasLabel | boolean | true | Show/hide the label |
labelIcon | ReactNode. | - | Sets an element for label to provide guidance about the scope of the field. |
Stack
- TypeScript for static type checking
- React — JavaScript library for user interfaces
- Emotion — for writing css styles with JavaScript
- Storybook — UI component environment powered by Vite
- Jest - JavaScript Testing Framework
- React Testing Library - to test UI components in a user-centric way
- ESLint for code linting
- Prettier for code formatting
- Tsup — TypeScript bundler powered by esbuild
- Yarn from managing packages
Commands
yarn build- Build the packageyarn dev- Run the package locallyyarn lint- Lint all files within this packageyarn test- Run all unit testsyarn test:report- Open the test coverage reportyarn test:update:snapshot- Run all unit tests and update the snapshot
Compilation
Running yarn build from the root of the package will use tsup to compile the raw TypeScript and React code to plain JavaScript.
The /dist folder contains the compiled output.
text-area
└── dist
├── index.d.ts <-- Types
├── index.js <-- CommonJS version
└── index.mjs <-- ES Modules version
...
Versioning
Follows semantic versioning
© License
Licensed under MIT License