# Input Input - Text Field allow users to enter, edit and submit information such as names, emails, passwords or search queries. They support user interaction by enabling data input in forms, searches and workflows, ensuring a smooth and efficient user experience. **Category:** Components **Storybook:** https://doc.ux4g.gov.in/web/?path=/story/ux4g-components-input--introduction ## Variants documented in Storybook - InputSizes: https://doc.ux4g.gov.in/web/?path=/story/ux4g-components-input--inputsizes - ValidationStates: https://doc.ux4g.gov.in/web/?path=/story/ux4g-components-input--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 Input. Each example shows the rendered HTML, the equivalent React JSX, and the Angular template markup. ### 1. Input Sizes — Input Sizes HTML: ```html

Input Small

token

Input Medium

token

Input Large

token
info Description

Input XLarge

token
``` React: ```jsx import React from 'react'; const InputExample1Demo = () => ( <> {/* Variant: Input Small */}

Input Small

token
{/* Variant: Input Medium */}

Input Medium

token
{/* Variant: Input Large */}

Input Large

token
info Description
{/* Variant: Input XLarge */}

Input XLarge

token
); export default InputExample1Demo; ``` Angular: ```html

Input Small

token

Input Medium

token

Input Large

token
info Description

Input XLarge

token
``` ### 2. Introduction — Introduction HTML: ```html
Components

Input

Input - Text Field allow users to enter, edit and submit information such as names, emails, passwords or search queries. They support user interaction by enabling data input in forms, searches and workflows, ensuring a smooth and efficient user experience.

Input Showcase

Source-backed examples from src/index.html covering standard input sizing and supporting actions.

Input Small

token

Input Medium

token

Input Large

token
info Description

CSS Class Reference

Quickly copy source-backed utility classes for input structure and state patterns.

Input Structure

Input Container ux4g-input-container
Field Shell ux4g-input
Native Input ux4g-input-input
Action Group ux4g-input-actions
Helper Message ux4g-input-helper

State Classes

Default State ux4g-input-default
Error State ux4g-input-error
Success State ux4g-input-success
Warning State ux4g-input-warning
Disabled State ux4g-input-is-disabled

Size Classes

Small Input ux4g-input-sm
Medium Input ux4g-input-md
Large Input ux4g-input-lg
Extra Large Input ux4g-input-xl
``` React: ```jsx import React from 'react'; const InputExample2Demo = () => ( <>
Components

Input

Input - Text Field allow users to enter, edit and submit information such as names, emails, passwords or search queries. They support user interaction by enabling data input in forms, searches and workflows, ensuring a smooth and efficient user experience.

Input Showcase

Source-backed examples from src/index.html covering standard input sizing and supporting actions.

Input Small

token

Input Medium

token

Input Large

token
info Description

CSS Class Reference

Quickly copy source-backed utility classes for input structure and state patterns.

Input Structure

Input Container ux4g-input-container
Field Shell ux4g-input
Native Input ux4g-input-input
Action Group ux4g-input-actions
Helper Message ux4g-input-helper

State Classes

Default State ux4g-input-default
Error State ux4g-input-error
Success State ux4g-input-success
Warning State ux4g-input-warning
Disabled State ux4g-input-is-disabled

Size Classes

Small Input ux4g-input-sm
Medium Input ux4g-input-md
Large Input ux4g-input-lg
Extra Large Input ux4g-input-xl
); export default InputExample2Demo; ``` Angular: ```html
Components

Input

Input - Text Field allow users to enter, edit and submit information such as names, emails, passwords or search queries. They support user interaction by enabling data input in forms, searches and workflows, ensuring a smooth and efficient user experience.

Input Showcase

Source-backed examples from src/index.html covering standard input sizing and supporting actions.

Input Small

token

Input Medium

token

Input Large

token
info Description

CSS Class Reference

Quickly copy source-backed utility classes for input structure and state patterns.

Input Structure

Input Container ux4g-input-container
Field Shell ux4g-input
Native Input ux4g-input-input
Action Group ux4g-input-actions
Helper Message ux4g-input-helper

State Classes

Default State ux4g-input-default
Error State ux4g-input-error
Success State ux4g-input-success
Warning State ux4g-input-warning
Disabled State ux4g-input-is-disabled

Size Classes

Small Input ux4g-input-sm
Medium Input ux4g-input-md
Large Input ux4g-input-lg
Extra Large Input ux4g-input-xl
``` ### 3. Validation States — Input Validation States HTML: ```html
token
info Description
token
error Error message
token
info Description
token
check_circle Success message
token
warning Warning message
``` React: ```jsx import React from 'react'; const InputExample3Demo = () => ( <> {/* Variant: Validation State - default */}
token
info Description
{/* Variant: Validation State - Error */}
token
error Error message
{/* Variant: Validation State - disabled */}
token
info Description
{/* Variant: Validation State - Success */}
token
check_circle Success message
{/* Variant: Validation State - Warning */}
token
warning Warning message
); export default InputExample3Demo; ``` Angular: ```html
token
info Description
token
error Error message
token
info Description
token
check_circle Success message
token
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.