Forms Style Guide

The default one-line input with a visible label and optional helper text.

Friendly Name

Field 01 — Text Input

GUID

8a17b3e1-0401-4d24-9a71-000000000401Copy GUID

Use in

Account, Community, Tools, Contact

.ta-field input { min-height:44px; padding:0 13px; border:1px solid #4a4d53; background:#111214; color:#c6c8cd; }

A continuous 52px surface with icon, input, and optional clear action. Focus selects the complete outer control; the inner text input never draws its own border, ring, or glow.

Friendly Name

Search 01 — Search Control

GUID

8a17b3e1-0402-4d24-9a71-000000000402Copy GUID

Use in

Tools, Content, File Explorer, Community, Evidence Center

.ta-search-control { min-height:52px; display:grid; grid-template-columns:22px minmax(0,1fr) auto; gap:10px; padding:0 14px; border:1px solid #4a4d53; } .ta-search-control:focus-within { border-color:var(--ta-focus-ring); box-shadow:0 0 0 3px rgb(from var(--theme-accent) r g b / .16), 0 0 18px rgb(from var(--theme-accent) r g b / .16); } .ta-search-control > input:focus, .ta-search-control > input:focus-visible { border:0; outline:0; box-shadow:none; }

Multi-line text with at least 13px internal padding and a comfortable 1.6 line height.

Friendly Name

Field 02 — Text Area

GUID

8a17b3e1-0403-4d24-9a71-000000000403Copy GUID

Use in

Descriptions, Posts, Replies, Messages, Notes

.ta-field textarea { min-height:118px; padding:13px; resize:vertical; line-height:1.6; }

Use only when a browser-owned native menu is specifically required. It keeps the canonical trigger colors and 15px chevron inset, but its opened option panel cannot match the boxed site dropdown across browsers.

Friendly Name

Field 03 — Native Select Fallback

GUID

8a17b3e1-0404-4d24-9a71-000000000404Copy GUID

Use in

Native Fallback Only; Use Dropdown 02 for Normal Public Single-Choice Menus

.ta-field select { min-height:44px; border:1px solid #4a4d53; background:#111214; color:#c6c8cd; } main:not(.admin-main):not(.admin-page) select:not([multiple]) { appearance:none; padding-right:42px; background-position:right 15px center; background-size:10px 6px; }

The canonical dropdown for choosing any number of values. It is the live Evidence Tracker pattern: a dark floating panel, individually boxed rows, visible theme-color checkboxes, and a fixed SVG chevron exactly 15px from the right edge and vertically centered.

Friendly Name

Dropdown 01 — Boxed Multi-Select

GUID

8a17b3e1-0412-4d24-9a71-000000000412Copy GUID

Use in

Evidence Category Filters and Every Public Multi-Select Dropdown

<BoxedMultiSelect
  value={selected}
  onChange={setSelected}
  options={options}
  summary={selected.length ? `${selected.length} Selected` : "All Categories"}
  eyebrow="Filter the Timeline"
  title="Choose Categories"
/>

--ta-dropdown-chevron-inset:15px; .ta-dropdown__trigger { position:relative; padding:0 42px 0 14px; } .ta-dropdown__chevron { width:10px; height:6px; position:absolute; right:var(--ta-dropdown-chevron-inset); top:50%; transform:translateY(-50%); } .ta-dropdown__option--multi > input:checked + .ta-dropdown__option-surface .ta-dropdown__check { background:var(--theme-accent); color:#fff; }

The default public dropdown when only one value may be selected. It uses the same trigger, floating panel, boxed rows, and 15px centered chevron as Dropdown 01, but deliberately omits checkboxes and closes after selection. Every long list, including State and Committee, keeps the panel at a usable height and scrolls only the options region.

Friendly Name

Dropdown 02 — Boxed Single-Select

GUID

8a17b3e1-0413-4d24-9a71-000000000413Copy GUID

Use in

Congress State, Committee and Page Size Filters; Categories, Sorting, Country, Time Zone, Severity, Units, Formats

<BoxedSingleSelect
  value={category}
  onChange={setCategory}
  options={options}
  summary={category || "Choose a Category"}
  eyebrow="Choose One"
  title="Category"
/>

.ta-dropdown--single .ta-dropdown__option-surface { grid-template-columns:38px minmax(0,1fr); } .ta-dropdown__option--single[aria-selected=true] .ta-dropdown__option-surface { border-color:var(--theme-accent); background:var(--theme-accent); color:#fff; } .ta-dropdown__menu { max-height:min(460px,calc(100dvh - 110px)); display:flex; flex-direction:column; } .ta-dropdown__options { min-height:0; max-height:360px; overflow-y:auto; overscroll-behavior:contain; }

Use when multiple choices may be active or for a clear yes/no confirmation.

Friendly Name

Choice 01 — Checkbox

GUID

8a17b3e1-0405-4d24-9a71-000000000405Copy GUID

Use in

Filters, Consent, Record Flags, Notifications

.ta-choice { display:inline-flex; align-items:center; gap:9px; } .ta-choice input { width:18px; height:18px; accent-color:var(--theme-accent); }

Use for one choice from a short visible set. Do not use tabs when the choice submits form data rather than changing a view.

Friendly Name

Choice 02 — Radio

GUID

8a17b3e1-0406-4d24-9a71-000000000406Copy GUID

Use in

Format, Method, Scope, Preference

.ta-choice-group { display:flex; flex-wrap:wrap; gap:14px 22px; }

Use only for a setting that takes effect immediately, not for a value that waits for form submission.

Friendly Name

Switch 01 — Immediate Toggle

GUID

8a17b3e1-0407-4d24-9a71-000000000407Copy GUID

Use in

Notifications, Motion Effects, Live Preferences

.ta-switch input:checked + i { border-color:var(--theme-accent); background:var(--theme-accent); }

A large upload target with click and drag-and-drop support. Always state accepted types and limits.

Friendly Name

Upload 01 — File Drop

GUID

8a17b3e1-0408-4d24-9a71-000000000408Copy GUID

Use in

Evidence Import, Attachments, Member Key File, Profile Picture

.ta-file-drop { min-height:180px; display:grid; place-content:center; padding:24px; border:1px dashed #62656b; background:#111214; }

Keep the label and entered value visible, outline the field, and place a specific recovery message directly below it.

Friendly Name

State 03 — Field Error

GUID

8a17b3e1-0409-4d24-9a71-000000000409Copy GUID

Use in

Any Validation Failure

.ta-field--error input { border-color:var(--theme-accent); } .ta-field--error small { color:var(--theme-accent-copy); }

Disabled fields remain legible but visually inactive. Use helper text when the reason is not obvious.

Friendly Name

State 04 — Disabled Field

GUID

8a17b3e1-0410-4d24-9a71-000000000410Copy GUID

Use in

Unavailable Options and Locked Generated Values

.ta-field input:disabled { background:#191a1d; color:#6f7278; cursor:not-allowed; }

Two columns on wide screens, one column on small screens. Long inputs and text areas use the wide modifier.

Friendly Name

Layout 01 — Form Grid

GUID

8a17b3e1-0411-4d24-9a71-000000000411Copy GUID

Use in

Account, Tools, Record Editor

.ta-form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; } .ta-field--wide { grid-column:1/-1; }