dotlineform

UI Primitive: Input

i

← ui catalogue

Docs viewer: UI Catalogue

Live Primitive

This page is the code-bound reference for shared field-entry controls. It keeps text entry, dropdowns, stepped numeric assignment, and readonly field display in one primitive family because the user intent is assigning one field value.

Live Variants

Each example keeps the shared control height and uses the same field wrapper for width and label placement. Numeric data should still default to plain input boxes unless step controls are part of the explicit UI requirement.

Default Width

Base field width matches the small-button row rhythm used elsewhere in Studio.

Use this as the unnamed default when the page already makes the field meaning obvious from nearby context.

Fill Width

Extend from the left edge when the field should take the remaining row width.

Use the fill modifier when the input is the main editable surface in the row and surrounding controls should stay fixed-width.

Label Above

Default labelled form pattern for one field.

Use the stacked label when the field needs a clear standalone name and extra vertical space is acceptable.

Label Left

Compact inline label when the row already reads as one control group.

This keeps label and value tightly coupled without introducing the stronger two-column form rhythm.

Two Columns With Dropdown

Use a stronger label column when several related controls need aligned names.

The same field wrapper supports native select controls without changing the shared height or border rhythm.

Increment Control

Use only when explicit step controls are part of the task, not just because the stored value is numeric.

Treat this as one value-assignment control. Numeric fields should still default to plain input boxes unless the page genuinely needs adjacent step actions.

Disabled

Disabled means temporarily unavailable because another page state is incomplete.

The geometry stays stable, but the displayed value is muted to match the unavailable state.

Readonly Display

Always-readonly values keep normal text and lose the filled background.

Use this for values that are display-only by design. Do not use the disabled state when the field is not expected to become editable.

source alpha
80%

Canonical Markup

Copy these snippets as the current baseline for one-value field controls. Use the field wrapper for layout, and keep the base input class focused on the shared shell.

Default Width

<div class="tagStudioField">
  <div class="tagStudioField__control">
    <input class="tagStudio__input" type="text" placeholder="80%">
  </div>
</div>

Label Above

<label class="tagStudioField" for="exampleInputStacked">
  <span class="tagStudioField__label">alpha</span>
  <span class="tagStudioField__control">
    <input class="tagStudio__input" id="exampleInputStacked" type="text" placeholder="80%">
  </span>
</label>

Label Left

<label class="tagStudioField tagStudioField--inline" for="exampleInputInline">
  <span class="tagStudioField__label">alpha</span>
  <span class="tagStudioField__control">
    <input class="tagStudio__input" id="exampleInputInline" type="text" placeholder="80%">
  </span>
</label>

Specified Width

<label class="tagStudioField" for="exampleInputWidth" style="--field-width: 11rem;">
  <span class="tagStudioField__label">alpha</span>
  <span class="tagStudioField__control">
    <input class="tagStudio__input" id="exampleInputWidth" type="text" placeholder="80%">
  </span>
</label>

Fill Width

<div class="tagStudioField tagStudioField--fill">
  <div class="tagStudioField__control">
    <input class="tagStudio__input" type="text" placeholder="Opacity for the current layer">
  </div>
</div>

Two Columns With Dropdown

<label class="tagStudioField tagStudioField--split" for="exampleInputSelect">
  <span class="tagStudioField__label">preset</span>
  <span class="tagStudioField__control">
    <select class="tagStudio__input tagStudio__input--defaultValue" id="exampleInputSelect">
      <option selected>Alpha 80%</option>
      <option>Alpha 100%</option>
      <option>Alpha 60%</option>
    </select>
  </span>
</label>

Increment Control

<div class="tagStudioField tagStudioField--inline">
  <label class="tagStudioField__label" for="exampleInputStep">alpha</label>
  <div class="tagStudioField__control">
    <button class="tagStudio__button tagStudioField__stepButton" type="button" aria-label="Decrease alpha">-</button>
    <input class="tagStudio__input tagStudioField__incrementValue" id="exampleInputStep" type="text" placeholder="80" inputmode="numeric">
    <button class="tagStudio__button tagStudioField__stepButton" type="button" aria-label="Increase alpha">+</button>
  </div>
</div>

Disabled

<label class="tagStudioField" for="exampleInputDisabled">
  <span class="tagStudioField__label">alpha</span>
  <span class="tagStudioField__control">
    <input class="tagStudio__input" id="exampleInputDisabled" type="text" placeholder="Available after selecting a layer" disabled>
  </span>
</label>

Readonly Display

<div class="tagStudioField tagStudioField--split">
  <span class="tagStudioField__label">source alpha</span>
  <div class="tagStudioField__control">
    <span class="tagStudio__input tagStudio__input--readonlyDisplay" id="exampleInputReadonly">80%</span>
  </div>
</div>

Notes

Implementation points only.

Primitive Scope

  1. The shared input primitive covers the common user intent of assigning one field value, whether the control is free text, a dropdown, or a stepped numeric value.
  2. The base shell remains tagStudio__input; width, label placement, and add-on controls belong to the tagStudioField composition layer.
  3. This primitive is about field entry and field display. Command buttons beside a field remain part of the button primitive.

Current Baseline

  1. Text inputs, selects, and stepped numeric controls should all keep the same control height as the small Studio button.
  2. The default field width is 18rem unless a page sets --field-width deliberately.
  3. Use tagStudioField--fill when the field should take the available row width from the left edge.
  4. Labels are optional, but when present they should use an explicit layout: stacked above, inline left, or a stronger two-column form row.
  5. Numeric data should default to the plain input-box presentation. Do not infer stepper UI from storage type alone.

States

  1. Disabled means the field is temporarily unavailable because some other page state has not been satisfied yet.
  2. Disabled fields keep their geometry but mute the displayed value.
  3. If a value is always display-only, use tagStudio__input--readonlyDisplay on a non-input element instead of disabled so the text stays normal while the background becomes transparent.
  4. If a page needs to show a visible default value in muted styling before the user edits it, use placeholder text for text-like fields and tagStudio__input--defaultValue for control types that do not support placeholder behavior cleanly.
  5. Default text should read lighter than normal muted labels and helper text, so it remains visibly distinct from entered content.

Design Guidance

  1. Keep stepped value controls as one field plus full-height small buttons, and use them only when the page explicitly needs step actions. Avoid half-height split-arrow controls because they break the shared row rhythm.
  2. Use the inline label only when the row already reads as one compact control group. Use the two-column label when several fields need aligned labels.
  3. Keep explicit width overrides local with --field-width rather than redefining the default width globally.
  4. In two-column field rows, labels should be vertically centered against single-line inputs and top-aligned only for multiline fields such as textareas.

Copy Guidance

  1. Live Studio pages should still source visible labels, placeholders, and default values from studio_config.json when that copy belongs to runtime UI.
  2. The catalogue page is static reference markup, so its example values can stay hard-coded.