Control

A control is the base interactive element used in form fields, available as a button or input.

Button

Use a control button to trigger custom dropdowns, date pickers, or other interactive elements.

<div class="tng-control">
  <button class="tng-control-button">Select an item</button>
</div>

Select an item

Input

Use an input control to allow users to enter text or data.

<div class="tng-control">
  <input class="tng-control-input" type="text" />
</div>

Elements

Icon Button

<div class="tng-control">
  <input class="tng-control-input" type="text" />
  <button
    class="p-absolute tng-icon-button is-ghost"
    aria-label="More info"
  >
    <i aria-hidden="true" class="tng-icon icon-info"></i>
  </button>
</div>

Icons

<div class="tng-control">
  <i aria-hidden="true" class="tng-icon icon-car"></i>
  <button class="tng-control-button">Select model</button>
  <i aria-hidden="true" class="tng-icon icon-chevron-down"></i>
</div>

Select model

Label

A dynamic label can be combined with an input control to provide context about the expected input. The label will shrink and move above the input field when the user focuses on the input.

<div class="tng-control">
  <label class="tng-control-label">Email address</label>
  <input class="tng-control-input" type="text" />
</div>
<div class="tng-control">
  <label class="tng-control-label is-lg">Email address</label>
  <input class="tng-control-input" type="text" />
</div>

Email address

Email address

Note

Because we can’t detect with CSS if input elements are empty you have to toggle the is-lg class on the label based on whether the input is empty or not.

Required

In case of an input control you can rely on the native HTML required attribute to indicate that a form control is required. If that’s not an option, you can use the is-required class anywhere within the control to show the required state.

<div class="tng-control">
  <button class="tng-control-button is-required">
    Select an item
  </button>
  <i aria-hidden="true" class="tng-icon icon-chevron-down"></i>
</div>
<div class="tng-control">
  <label class="tng-control-label">Email address</label>
  <input class="tng-control-input" type="text" required />
</div>

Select an item

Email address

States

Disabled

<div class="tng-control">
  <input class="tng-control-input" type="text" disabled />
</div>

<div class="tng-control">
  <button class="tng-control-button" disabled>Select an item</button>
</div>

Select an item

Invalid

Note

You won’t need the is-invalid class when using native HTML validation (e.g., required attribute), as the invalid state will be applied automatically.

<div class="tng-control is-invalid">
  <input class="tng-control-input" type="text" />
</div>

Valid

Note

You won’t need the is-valid class when using native HTML validation (e.g., required attribute), as the valid state will be applied automatically.

<div class="tng-control is-valid">
  <input class="tng-control-input" type="text" />
</div>

Accessibility

Label association

Floating labels (tng-control-label) must still be associated with the input via for / id. Placeholder-only inputs are not accessible — always provide a <label>.

Required

When using the .is-required class instead of the native required attribute, also add aria-required="true" to the control so assistive technologies announce it.

Validation states

The .is-invalid and .is-valid classes provide visual feedback only. Pair them with:

• aria-invalid="true" on the control for the error state.
• An error message linked via aria-describedby.

Disabled

The native disabled attribute removes the control from tab order and communicates the state automatically — no additional ARIA needed.