Forms
Inputs, selects, toggles and validation - fields and buttons share one height scale by construction.
Form Elements
Every control the framework styles. They stay light in both themes on purpose, and they share one height per size step - a field, a select and the button beside them line up by construction.
Input with different Sizes
Select with Different Sizes
mw-select-custom draws the open list in the framework's look
where the browser can (Chrome 135+, Safari 27+) and leaves the native list
everywhere else - the value, the keyboard and the form stay the select's.
Fields fill their column; mw-w-auto sizes one by its content
in a row of controls.
Tag Field
mw-input mw-input-tags is a box that looks like the field and
holds the tags plus a bare input that adds them. It takes the field's
focus halo while the input inside has focus.
Checkboxes
Default
Small & Inline
Large & Colored
Error
Set on the input
The last group needs no class on the label: indeterminate,
disabled and aria-invalid on the input are
enough, and so are Angular's ng-invalid ng-touched - which is
what a reactive form sets when it disables or validates a control.
Radio Buttons with different sizes and colors
Default
Small & Inline
Large & Colored
Error
Ultimate Sliders
Textarea with Different Sizes
Prefilled Values
Add mw-prefilled to any control whose value was not typed in
this session - loaded from an existing record, restored from a draft,
filled with a default. The corner triangle scales with the control size
and stays visible on readonly and disabled controls. It is decoration
only, so repeat the information in a mw-field-hint for screen
readers.
Toggle Switch
Default
Small & Inline
Large & Colored
Disabled
Input Group
A field with something welded to its edge - a unit, an icon, a button. Put the size modifier on the group and it reaches the field inside, and the whole group takes one focus ring rather than three.
Prefix & Suffix
With Buttons & Sizes
Date & DateTime
Time
Segmented Control
Two or three positions of one switch - income or expense, offer or quote. Deliberately not a mw-button-bar: that one stacks below 576px and gives every button 96% width, which is right for a row of independent actions and wrong here. Stacked, two positions of a switch look like two buttons you could press both of. A segmented control stays horizontal at every width and splits the row into equal shares.
Two Positions
Three Positions & Variants
Native Radios
A label per segment around a radio: the checked one lights up, the keyboard
and the form value are the browser's, and formControlName on the
inputs is all Angular needs. aria-pressed,
aria-checked and aria-selected mark a segment too.
Form Field Pattern
Label, field, hint and error as one unit, so the spacing between them is not re-invented per form. Written with Angular reactive forms in mind; the markup is plain HTML.
Field Wrapper (mw-field)
The mw-field wrapper groups label, input, hint, and error
message as a single unit - the recommended pattern for Angular reactive
forms.
Validation & Readonly States
The control turns red by itself from :user-invalid,
aria-invalid="true" or Angular's
ng-invalid ng-touched; mw-field-has-error on
the wrapper is for a control the framework cannot see. A control without
a field wrapper - also a mw-checkbox-group,
mw-radio-group or mw-slider-container - takes
mw-form-element-error instead.
mw-prefilled.
Form
The layout around the fields: a flex column with a single gap, so no field
needs a margin of its own. mw-form carries no padding, which is
what lets it sit straight inside a modal body or a panel.
Example - User Profile Settings
Personal Information
Account Settings
Profile Details
Gender
Interests
Notification Preferences
Channels
Account
Experience
Changes are saved to your account immediately after clicking Save.
Login
Click "Login" to simulate a failure and see the red border. It will automatically clear after 4 seconds.
