# Textarea Textareas support longer-form text entry with helper messaging, counters, and validation states. **Category:** Components **Storybook:** https://doc.ux4g.gov.in/web/?path=/story/ux4g-components-textarea--introduction ## Variants documented in Storybook - DefaultField: https://doc.ux4g.gov.in/web/?path=/story/ux4g-components-textarea--defaultfield - ValidationStates: https://doc.ux4g.gov.in/web/?path=/story/ux4g-components-textarea--validationstates ## Framework setup ### HTML / CDN ```html ``` ### React ```bash npm install ux4g-web-components ``` ```jsx import 'ux4g-web-components/styles.css'; import 'ux4g-web-components/design-system'; ``` ### Angular Update `angular.json`: ```json { "styles": [ "node_modules/ux4g-web-components/styles/ux4g.css", "src/styles.css" ], "scripts": [ "node_modules/ux4g-web-components/dist/runtime/design-system.js" ] } ``` ## Code examples The snippets below are extracted from the Storybook canvas for Textarea. Each example shows the rendered HTML, the equivalent React JSX, and the Angular template markup. ### 1. Default Field — Default Textarea HTML: ```html
0 / 200
info Description
``` React: ```jsx import React from 'react'; const TextareaExample1Demo = () => ( <> {/* Variant: default Textarea */}
0 / 200
info Description
); export default TextareaExample1Demo; ``` Angular: ```html
0 / 200
info Description
``` ### 2. Introduction — Introduction HTML: ```html
Components

Textarea

Textareas support longer-form text entry with counters, helper messaging, and validation feedback using the UX4G design system.

Textarea Showcase

Source-backed medium textarea markup with helper text and a live character counter.

0 / 200
info Description

CSS Class Reference

Quickly copy source-backed utility classes for textarea structure, sizes, and states.

Textarea Structure

Textarea Container ux4g-textarea-container
Field Shell ux4g-textarea
Native Textarea ux4g-textarea-input
Character Counter ux4g-textarea-counter
Helper Message ux4g-textarea-helper

State and Size Classes

Default State ux4g-textarea-default
Error State ux4g-textarea-error
Success State ux4g-textarea-success
Warning State ux4g-textarea-warning
Disabled State ux4g-textarea-is-disabled
Small Size ux4g-textarea-sm
Medium Size ux4g-textarea-md
Large Size ux4g-textarea-lg
``` React: ```jsx import React from 'react'; const TextareaExample2Demo = () => ( <>
Components

Textarea

Textareas support longer-form text entry with counters, helper messaging, and validation feedback using the UX4G design system.

Textarea Showcase

Source-backed medium textarea markup with helper text and a live character counter.

0 / 200
info Description

CSS Class Reference

Quickly copy source-backed utility classes for textarea structure, sizes, and states.

Textarea Structure

Textarea Container ux4g-textarea-container
Field Shell ux4g-textarea
Native Textarea ux4g-textarea-input
Character Counter ux4g-textarea-counter
Helper Message ux4g-textarea-helper

State and Size Classes

Default State ux4g-textarea-default
Error State ux4g-textarea-error
Success State ux4g-textarea-success
Warning State ux4g-textarea-warning
Disabled State ux4g-textarea-is-disabled
Small Size ux4g-textarea-sm
Medium Size ux4g-textarea-md
Large Size ux4g-textarea-lg
); export default TextareaExample2Demo; ``` Angular: ```html
Components

Textarea

Textareas support longer-form text entry with counters, helper messaging, and validation feedback using the UX4G design system.

Textarea Showcase

Source-backed medium textarea markup with helper text and a live character counter.

0 / 200
info Description

CSS Class Reference

Quickly copy source-backed utility classes for textarea structure, sizes, and states.

Textarea Structure

Textarea Container ux4g-textarea-container
Field Shell ux4g-textarea
Native Textarea ux4g-textarea-input
Character Counter ux4g-textarea-counter
Helper Message ux4g-textarea-helper

State and Size Classes

Default State ux4g-textarea-default
Error State ux4g-textarea-error
Success State ux4g-textarea-success
Warning State ux4g-textarea-warning
Disabled State ux4g-textarea-is-disabled
Small Size ux4g-textarea-sm
Medium Size ux4g-textarea-md
Large Size ux4g-textarea-lg
``` ### 3. Validation States — Textarea Validation States HTML: ```html
0 / 200
info Description
error Error message
info Description
check_circle Success message
warning Warning message
``` React: ```jsx import React from 'react'; const TextareaExample3Demo = () => ( <> {/* Variant: Textarea Validation State - default */}
0 / 200
info Description
{/* Variant: Textarea Validation State - Error */}
error Error message
{/* Variant: Textarea Validation State - disabled */}
info Description
{/* Variant: Textarea Validation State - Success */}
check_circle Success message
{/* Variant: Textarea Validation State - Warning */}
warning Warning message
); export default TextareaExample3Demo; ``` Angular: ```html
0 / 200
info Description
error Error message
info Description
check_circle Success message
warning Warning message
``` ## Accessibility notes - Use semantic HTML and required ARIA attributes where the Storybook example shows them. - Ensure visible focus indicators and keyboard operability. - Test color contrast against WCAG 2.1 AA.