Forms

Native form controls inherit the Tanaab control treatment inside docs content. Use raw HTML controls, keep real labels in the markup, and use concise placeholders only as visual prompts.

Text Input

Name

Textarea

How can we help?

Select

ServiceServiceStrategyDesignDevelopment

Toggle

Enable section border

Focus

Keyboard focus uses a square brand-colored border. Do not remove the focus state when adding page-specific form markup.

Labels

Do not use placeholder as the only label. When the visual design calls for placeholder-style prompts, keep a real label and hide it with .tms-visually-hidden.

Placeholders should name the field purpose, such as Link URL, without examples or instructions. Put examples and constraints in surrounding docs or help text instead.

<label>
  <span class="tms-visually-hidden">Background</span>
  <input type="text" placeholder="Background" />
</label>

Native selects do not support a real placeholder. Use a blank option for the visual prompt, keep a semantic label, and compute any backing default in code instead of forcing the default into the visible field.

<label>
  <span class="tms-visually-hidden">Type</span>
  <select>
    <option value="">Type</option>
    <option value="centered">centered</option>
  </select>
</label>