ds
Components
Input

Input

Text fields, textareas, selects and the field wrapper.

Text field

Title Kicker Shown above the title in present mode.

Code

<label class="fld" style="max-width:20rem">
  <span>Title</span>
  <input class="inp" value="Order pipeline" />
</label>
<label class="fld" style="max-width:20rem">
  <span>Kicker</span>
  <input class="inp" placeholder="Short tagline" />
  <span class="hint">Shown above the title in present mode.</span>
</label>

Sizes and styles

Code

<input class="inp lg" placeholder="Search posts" style="max-width:24rem" />
<input class="inp" placeholder="Default" style="max-width:24rem" />
<input class="inp mono" value="sk-ant-••••••••" style="max-width:24rem" />

.lg is for forms on fin1te.com. The default is topo's panel size. .mono is for keys, ids and code.

Textarea and select

Kind Stack

Role

Code

<div class="two" style="max-width:28rem">
  <label class="fld"><span>Kind</span>
    <select class="inp"><option>Compute</option><option>Storage</option><option>External</option></select>
  </label>
  <label class="fld"><span>Stack</span><input class="inp" type="number" value="3" min="1" max="6" /></label>
</div>
<label class="fld" style="max-width:28rem"><span>Role</span>
  <textarea class="inp" rows="3">Accepts orders and writes an event before it answers.</textarea>
</label>

States

Endpoint Use http:// or https://

Code

<label class="fld" style="max-width:20rem"><span>Endpoint</span>
  <input class="inp" aria-invalid="true" value="htp://localhost" aria-describedby="e1" />
  <span class="err" id="e1">Use http:// or https://</span>
</label>
<input class="inp" disabled value="Disabled" style="max-width:20rem" />

API

Class	On	What it does
`.inp`	input, textarea, select	The control. 2rem high, --bg fill, accent border and ring on focus.
`.lg`	.inp	2.375rem, 15px text.
`.mono`	.inp	Plex Mono at 12px.
`aria-invalid="true"`	.inp	Red border. Pair with an `.err` message.
`.fld`	label, div	Stacks a label, control and hint.
`.hint / .err`	span	Help text and error text under a control.
`.two`	div	Two equal columns of fields.

Accessibility

Wrap the control in <label class="fld"> or connect a label with for. Placeholders are not labels.
Point aria-describedby at hints and errors.