Reno: form controls

Form controls are automatically styled under .reno, .reno-dark, and .reno-form. The former two are assumed to be used for global styling of <body> or individual islands — these styles will affect all HTML elements, while the latter can be used to spot styling of individual forms, and affects form controls only.

Standard styling with .reno

Checkboxes & Radios

Initial stateCheckboxesRadios
Unselected
Unselected + disabled
Selected
Selected + disabled

Text, Number & Select

Initial state Text input Number input Select
Default with placeholder
Placeholder + disabled
Default with value
Value + disabled
Value + invalid

Text Areas

Initial state Text area
Default with placeholder
Placeholder + disabled
Default with value
Value + disabled

Standard styling with .reno-dark

Checkboxes & Radios

Initial stateCheckboxesRadios
Unselected
Unselected + disabled
Selected
Selected + disabled

Text, Number & Select

Initial state Text input Number input Select
Default with placeholder
Placeholder + disabled
Default with value
Value + disabled

Text Areas

Initial state Text area
Default with placeholder
Placeholder + disabled
Default with value
Value + disabled