Components

Inputs

Inputs are interactive UI elements which allow users to enter text, select an option, toggle a setting, or otherwise provide feedback. Seattle Times inputs are characterized by a thin, rounded border, normal-weight text slightly smaller than our standard font size, sans-serif font and no drop shadows.

Core Component

The core input component is .st-input. It can be used for inputs like text, url, tel, that don’t require any special consideration.

Variations

Variations contain all of the styles that make an .st-input recognizable, but also contain some extra styling for special situations. The input component variations are:

Select

.st-input-select - includes an icon to indicate user-interaction and information that is not currently visible.

Calendar

.st-input-calendar - adds a calendar icon to indicate expected format and interactivity. To get an interactive datepicker you’ll need to include the Datepicker.js script, add a class of .calendar to your input, and wrap it in a container element with a class of .flatpickr.

Our datepicker is a wrapper for the 3rd party component flatpickr. See flatpickr docs for different options and configurations.

Textarea

.st-input-textarea - allows for responsive resizing of textarea inputs

Toggle

A toggle is a customized input element with a look that is unique to The Seattle Times. It is essentially a checkbox, with the option to turn on or off a given option, but to be used in places where more visual attention is required.

This component is made up of two elements - a visually hidden checkbox which controls the state of the component (.st-toggle_control) and the checkbox label (.st-toggle) which contains the core visual styles of the component and also provides helpful label text. The two elements must be used as in this example, sibling elements with the checkbox first, and the label associated with the checkbox using the for="" attribute.

Modifiers

Input modifier classes affect layout and display of input components. They are intented to use in combination with component classes.

Inline

.input--inline - just like it sounds, this modifier makes elements display:inline. It also includes spacing so that inputs like checkboxes and radio buttons that usually appear inline next to labels display correctly. Checkbox and radio inputs are exceptions to the general rule that modifiers should be used alongside core component classes. At this time we are not styling these input types, but relying on browser defaults, so st-input-* component classes should not be used on these input types.

Block

.input--block - block inputs are often used within a single-column form for a uniform display.

Error

.input--error - red text indicates an error with the supplied value