# Form Field Form field group is a container that organizes related input controls like text boxes, dropdowns and checkboxes into logical sections. It structures long, complex forms to improve the user experience and allows developers to apply styles, validation rules or visibility conditions to multiple fields at once. **Category:** Components **Storybook:** https://doc.ux4g.gov.in/web/?path=/story/ux4g-components-form-field--introduction ## Variants documented in Storybook - Form Field Variants: https://doc.ux4g.gov.in/web/?path=/story/ux4g-components-form-field--form-field-variants - Form Field Group Example: https://doc.ux4g.gov.in/web/?path=/story/ux4g-components-form-field--form-field-group-example ## 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 Form Field. Each example shows the rendered HTML, the equivalent React JSX, and the Angular template markup. ### 1. Form Field Group Example — Full Form Example HTML: ```html

Form title

Description

Field Group Heading

Description

Required fields are marked with asterisk *
error
Error message
``` React: ```jsx import React from 'react'; const FormFieldExample1Demo = () => ( <> {/* Variant: Full Form Example */}

Form title

Description

Field Group Heading

Description

required fields are marked with asterisk *
{/* Left Column: Medium Sizes (M) */} {/* 100% */}
{/* 50% */}
{/* 33% */}
{/* Error Alert */}
error
Error message
{/* Actions */}
); export default FormFieldExample1Demo; ``` Angular: ```html

Form title

Description

Field Group Heading

Description

Required fields are marked with asterisk *
error
Error message
``` ### 2. Form Field Variants — Form Group HTML: ```html
``` React: ```jsx import React from 'react'; const FormFieldExample2Demo = () => ( <> {/* Variant: Form Group */}
); export default FormFieldExample2Demo; ``` Angular: ```html
``` ### 3. Form Field Variants — Dropdowns Group HTML: ```html
Select domain
info Description
State
District
Day
Month
Year
``` React: ```jsx import React from 'react'; const FormFieldExample3Demo = () => ( <> {/* Variant: Dropdowns Group */}
Select domain
info Description
{/* 50% */}
State
District
{/* 33% */}
Day
Month
Year
); export default FormFieldExample3Demo; ``` Angular: ```html
Select domain
info Description
State
District
Day
Month
Year
``` ### 4. Form Field Variants — Textarea HTML: ```html
0 / 200
info Description
``` React: ```jsx import React from 'react'; const FormFieldExample4Demo = () => ( <> {/* Variant: Textarea */}
0 / 200
info Description
); export default FormFieldExample4Demo; ``` Angular: ```html
0 / 200
info Description
``` ### 5. Form Field Variants — Checkbox Group HTML: ```html
``` React: ```jsx import React from 'react'; const FormFieldExample5Demo = () => ( <> {/* Variant: Checkbox Group */}
); export default FormFieldExample5Demo; ``` Angular: ```html
``` ### 6. Form Field Variants — Radio Group HTML: ```html
``` React: ```jsx import React from 'react'; const FormFieldExample6Demo = () => ( <> {/* Variant: Radio Group */}
); export default FormFieldExample6Demo; ``` Angular: ```html
``` ### 7. Form Field Variants — Switch HTML: ```html
``` React: ```jsx import React from 'react'; const FormFieldExample7Demo = () => ( <> {/* Variant: Switch */}
); export default FormFieldExample7Demo; ``` Angular: ```html
``` ### 8. Form Field Variants — Slider Single HTML: ```html
40%
info Description
``` React: ```jsx import React from 'react'; const FormFieldExample8Demo = () => ( <> {/* Variant: Slider Single */}
40%
info Description
); export default FormFieldExample8Demo; ``` Angular: ```html
40%
info Description
``` ### 9. Form Field Variants — Slider Range HTML: ```html
0% 25%
info Description
``` React: ```jsx import React from 'react'; const FormFieldExample9Demo = () => ( <> {/* Variant: Slider Range */}
0% 25%
info Description
); export default FormFieldExample9Demo; ``` Angular: ```html
0% 25%
info Description
``` ### 10. Introduction — Introduction HTML: ```html
Components

Form Field

Form field group is a container that organizes related input controls like text boxes, dropdowns and checkboxes into logical sections. It structures long, complex forms to improve the user experience and allows developers to apply styles, validation rules or visibility conditions to multiple fields at once.

Implementation Showcase

Visual demonstration of Form Field variations.

Form Group (Inputs)

Dropdowns Group

Select domain
info Description
State
District
Day
Month
Year

Textarea

0 / 200
info Description

Checkbox Group

Radio Group

Sliders & Switches

40%
info Description
0% 25%
info Description

Form Field Group Example

Form title

Description

Field Group Heading

Description

Required fields are marked with asterisk*
error
Error message

CSS Class Reference

Quickly copy layout and utility classes for Form elements.

Structural Form Classes

Form Field Wrapper ux4g-form-group
Input Container ux4g-input-container
Dropdown Container ux4g-dropdown
Textarea Container ux4g-textarea-container
Checkbox Wrapper ux4g-checkbox
Radio Wrapper ux4g-radio
Slider Container ux4g-slider

Grid Utilities

Grid Row ux4g-row
100% Width Column ux4g-col-12
50% Width Column ux4g-col-6
33% Width Column ux4g-col-4
Extra Large Gutter ux4g-gutter-xl
Medium Gutter ux4g-gutter-m
Small Gutter ux4g-gutter-s
``` React: ```jsx import React from 'react'; const FormFieldExample10Demo = () => ( <>
Components

Form Field

Form field group is a container that organizes related input controls like text boxes, dropdowns and checkboxes into logical sections. It structures long, complex forms to improve the user experience and allows developers to apply styles, validation rules or visibility conditions to multiple fields at once.

Implementation Showcase

Visual demonstration of Form Field variations.

Form Group (Inputs)

Dropdowns Group

Select domain
info Description
{/* 50% */}
State
District
{/* 33% */}
Day
Month
Year

Textarea

0 / 200
info Description

Checkbox Group

Radio Group

Sliders & Switches

40%
info Description
0% 25%
info Description

Form Field Group Example

Form title

Description

Field Group Heading

Description

required fields are marked with asterisk *
{/* Left Column: Medium Sizes (M) */} {/* 100% */}
{/* 50% */}
{/* 33% */}
{/* Error Alert */}
error
Error message
{/* Actions */}

CSS Class Reference

Quickly copy layout and utility classes for Form elements.

{/* Structural Classes */}

Structural Form Classes

Form Field Wrapper ux4g-form-group
Input Container ux4g-input-container
Dropdown Container ux4g-dropdown
Textarea Container ux4g-textarea-container
Checkbox Wrapper ux4g-checkbox
Radio Wrapper ux4g-radio
Slider Container ux4g-slider
{/* Grid Classes */}

Grid Utilities

Grid Row ux4g-row
100% Width Column ux4g-col-12
50% Width Column ux4g-col-6
33% Width Column ux4g-col-4
Extra Large Gutter ux4g-gutter-xl
Medium Gutter ux4g-gutter-m
Small Gutter ux4g-gutter-s
); export default FormFieldExample10Demo; ``` Angular: ```html
Components

Form Field

Form field group is a container that organizes related input controls like text boxes, dropdowns and checkboxes into logical sections. It structures long, complex forms to improve the user experience and allows developers to apply styles, validation rules or visibility conditions to multiple fields at once.

Implementation Showcase

Visual demonstration of Form Field variations.

Form Group (Inputs)

Dropdowns Group

Select domain
info Description
State
District
Day
Month
Year

Textarea

0 / 200
info Description

Checkbox Group

Radio Group

Sliders & Switches

40%
info Description
0% 25%
info Description

Form Field Group Example

Form title

Description

Field Group Heading

Description

Required fields are marked with asterisk*
error
Error message

CSS Class Reference

Quickly copy layout and utility classes for Form elements.

Structural Form Classes

Form Field Wrapper ux4g-form-group
Input Container ux4g-input-container
Dropdown Container ux4g-dropdown
Textarea Container ux4g-textarea-container
Checkbox Wrapper ux4g-checkbox
Radio Wrapper ux4g-radio
Slider Container ux4g-slider

Grid Utilities

Grid Row ux4g-row
100% Width Column ux4g-col-12
50% Width Column ux4g-col-6
33% Width Column ux4g-col-4
Extra Large Gutter ux4g-gutter-xl
Medium Gutter ux4g-gutter-m
Small Gutter ux4g-gutter-s
``` ## 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.