Components

forms, accordions, tabs, sliders

Forms on this page use the current shared component CSS and component JS. Native inputs carry most of the styling, while tabs, accordions, toggles, and sliders use the markup hooks already defined in the system.

Forms

The form styles in css/components/wg-components.css cover text inputs, textarea, select, file upload, range, color, date, time, and datetime-local inputs. Checkbox and radio styling is applied directly to the native input elements.

Text Input Example: Hello world

Textarea Max 500 characters

I agree to the terms Required before submitting

Choose your plan

Basic Plan

Pro Plan

Enable notifications

Upload File Supported formats: JPG, PNG, PDF

Volume

Choose a Color

Select Option Choose one of the available options

Select a Date

Select a Time

Select Date & Time

Select

One

Two

Toggles

The component CSS includes two interactive toggle patterns here: .slider-toggle and .select-toggle. The slider toggle state is updated by js/components.js using aria-pressed.

Tabs

Tabs are wired by the data-tabs hook in js/components.js. The script manages aria-selected, tabindex, hidden, and keyboard navigation.

One Lorem ipsum dolor sit amet consectetur adipisicing elit...

Accordions

The accordion pattern uses .ui-toggle with data-behavior="accordion". The JS supports both simple accordions and filtered accordion panels.

Alpha super long title for a button dont you think

Alpha content in Section 3

Beta super long title for a button dont you think

Beta content in Section 3

Alpha

Alpha content in Section 3

Beta

Beta content in Section 3

Content for section 1

Content for section 2

Lorem, ipsum dolor sit amet consectetur adipisicing elit...

Progress

The progress bar uses the shared progress classes from wg-components.css. The visible fill width is controlled inline or by script, while ARIA values describe the state for assistive technology.

Loading Progress

Slider

The slider uses the data-behavior="slider" hook in js/components.js. The option buttons update the active state and translate the inner track.

Sample Form

The .form class creates a stacked form block with shared spacing, background, and input styling.

Pagination

Pagination uses the shared .pagination and .page classes. The active page should use aria-current="page".

Dark Mode - needs work

It seems that you have reduce motion enabled!