Components

Input

Text inputs, selects and the search field (.ct-search with a leading glyph). Pair with .ct-field for a label.

Live example

Rendered with the real classes from /site/chitransit.css, light (left) and dark (right).

Route.ct-field · .ct-input

.ct-select

.ct-search

Code

<label class="ct-field"><span class="ct-field-label">Route</span><input class="ct-input" placeholder="22 Clark"></label>
<select class="ct-select" aria-label="Day"><option>Today</option></select>
<label class="ct-search"><svg viewBox="0 0 24 24" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"><circle cx="11" cy="11" r="6.5"/><path d="M20 20l-4.2-4.2"/></svg><input placeholder="Search stops" aria-label="Search stops"></label>

Tokens

From tokens/components.tokens.json. Override one instance by setting the property without the ct- prefix.

Custom property	Value	Alias
`--ct-input-background`	`var(--card)`	`{colors.card}`
`--ct-input-color`	`var(--ink)`	`{colors.ink}`
`--ct-input-color-placeholder`	`var(--muted)`	`{colors.muted}`
`--ct-input-font-size`	`var(--fs-body)`	`{type.body}`
`--ct-input-gap`	`var(--space-10)`	`{space.s10}`
`--ct-input-height`	`var(--size-search-field)`	`{size.searchField}`
`--ct-input-icon-size`	`18px`
`--ct-input-label-color`	`var(--muted)`	`{colors.muted}`
`--ct-input-label-font-size`	`var(--fs-sub)`	`{type.sub}`
`--ct-input-label-font-weight`	`var(--weight-semibold)`	`{weight.semibold}`
`--ct-input-label-gap`	`var(--space-6)`	`{space.s6}`
`--ct-input-padding-x`	`var(--space-12)`	`{space.s12}`
`--ct-input-radius`	`var(--r-card)`	`{radius.card}`

Usage

Do

Pair every input with a visible label in a .ct-field.
Use .ct-search for search, with its leading glyph.

Don't

Don't use the placeholder as the only label.

Accessibility

Associate the label with for/id.
Use type="search" for search fields so assistive tech announces them.