Forms

Form controls are the CSS layer — link talos.css (or all.css) and use the classes. Every text control draws its chamfered bottom-right corner and hairline from an SVG background that carries the state colour, so --error / --success recolour the cut, not just the text.

Field wrapper

The layout convention: a .talos-field column wraps a .talos-label, the control, and one line of metadata (__help or __error).

<div class="talos-field talos-field--error">
  <label class="talos-label talos-label--required">Port</label>
  <input class="talos-input" value="99999" />
  <span class="talos-field__error">Out of range (1–65535).</span>
</div>

.talos-field--error / --success recolour the nested control. .talos-label--required adds the red asterisk. Help text is __help; the validation line is __error.

Input & textarea

<input class="talos-input" placeholder="atlas-01" />
<textarea class="talos-textarea"></textarea>

State classes: --error, --success. :disabled dims to 0.5 and blocks the cursor.

Input group & search

<div class="talos-input-group">
  <span class="talos-input-addon talos-input-addon--leading">$</span>
  <input class="talos-input" placeholder="0.00" />
  <span class="talos-input-addon talos-input-addon--trailing">/mo</span>
</div>

<div class="talos-search">
  <span class="talos-search__icon">⌕</span>
  <input class="talos-input" placeholder="Filter nodes…" />
</div>

The group’s border is the visible outline (the inner input goes borderless); :focus-within brightens it. .talos-search positions an icon (and optional .talos-search__clear) over a padded input.

Select

<select class="talos-select">
  <option>eu-west-3</option>
  <option>us-east-1</option>
</select>

Native <select> with the chevron drawn as a background SVG. States: --error, --success.

Checkbox, radio, switch

Pair each with a .talos-check-row label so the text sits inline with the control.

<label class="talos-check-row"><input class="talos-checkbox" type="checkbox" checked /> Enable auto-scaling</label>
<label class="talos-check-row"><input class="talos-radio" type="radio" name="density" checked /> Comfortable</label>
<label class="talos-check-row"><input class="talos-switch" type="checkbox" checked /> Live telemetry</label>

All three are square, mechanical (no iOS rounding) and built on appearance: none. The switch fills with accent when checked; checkbox draws a corner tick, radio a centre dot.

Range

<input class="talos-range" type="range" min="0" max="100" value="60" />

Hairline track, square thumb — styled across ::-webkit-slider-* and ::-moz-range-*.

Fieldset

<fieldset class="talos-fieldset">
  <legend class="talos-fieldset__legend">Toggles</legend>
  …check-rows…
</fieldset>

A top-ruled section that groups related toggles under a muted HUD legend.