Web Implementation Guidelines Group Component Builder Information (v3+)

Preview: Input 1.0-alpha

These are a preview of components with individual items triggered. Because this is automatically generated, some of these components may look similiar to each other. This is also used by the Axe Monitor process to validate accessibility.

Preview: Base level for default

Form Information

Sample form pieces.

Some explanatory text which might get long. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam scelerisque est turpis, quis facilisis sem bibendum quis. Vestibulum finibus rutrum leo at imperdiet. Proin porta odio ut laoreet pharetra. Aenean sit amet blandit nisl, nec scelerisque orci. Donec sagittis nisi aliquet quam molestie pharetra. Suspendisse tincidunt, eros sit amet aliquet malesuada, lectus elit ultricies mauris, in vehicula odio nisl quis massa. Morbi commodo est sit amet elit aliquet malesuada.

Heading example

The data list is used to give a user free-text options, but prompt them to choose a specific item. You can use JavaScript to enforce that what they choose is one of the options. To start out, try typing "item"

Radio Buttons Title

Vertical Radio Buttons Title

Buttons

Disabled Button

Toggle States

This should be used when the effect happens immediately.

This should be used when the effect happens immediately.

Alert for forms

Preview: Base level for compact

Compact Versions

Some explanatory text which might get long. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam scelerisque est turpis, quis facilisis sem bibendum quis. Vestibulum finibus rutrum leo at imperdiet. Proin porta odio ut laoreet pharetra. Aenean sit amet blandit nisl, nec scelerisque orci. Donec sagittis nisi aliquet quam molestie pharetra. Suspendisse tincidunt, eros sit amet aliquet malesuada, lectus elit ultricies mauris, in vehicula odio nisl quis massa. Morbi commodo est sit amet elit aliquet malesuada.

Radio Buttons Title

Vertical Radio Buttons Title

Preview: Base level for long-short

Long and short text boxes

Preview: Base level for fieldset

Field Set and Disclaimer

Disclaimer

Field Set Examples

Field Set Title
Field Set Radio Buttons

Preview: Base level for theme

Form Information

Sample form pieces.

Some explanatory text which might get long. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam scelerisque est turpis, quis facilisis sem bibendum quis. Vestibulum finibus rutrum leo at imperdiet. Proin porta odio ut laoreet pharetra. Aenean sit amet blandit nisl, nec scelerisque orci. Donec sagittis nisi aliquet quam molestie pharetra. Suspendisse tincidunt, eros sit amet aliquet malesuada, lectus elit ultricies mauris, in vehicula odio nisl quis massa. Morbi commodo est sit amet elit aliquet malesuada.

Heading example

The data list is used to give a user free-text options, but prompt them to choose a specific item. You can use JavaScript to enforce that what they choose is one of the options. To start out, try typing "item"

Radio Buttons Title

Vertical Radio Buttons Title

Buttons

Disabled Button

Toggle States

This should be used when the effect happens immediately.

This should be used when the effect happens immediately.

Misc

Field Set Title
Field Set Radio Buttons
Alert for forms

Details

Provides classes to style inputs and form elements.

Full Version: 1.0-alpha

Type: web component

Date Created: 05/29/2026

Version notes:

Github repository: https://github.com/web-illinois/ilw-input/

Javascript file: https://dev.toolkit.illinois.edu/ilw-input/1.0.0-alpha/ilw-input.js

CSS file: https://dev.toolkit.illinois.edu/ilw-input/1.0.0-alpha/ilw-input.css

JSON information: ilw-input.1.0-alpha.json

Web Implementation Guidelines Group Component Builder Information (v3+)

Note: this page is not using the toolkit because it is meant to test individual components in isolation.