Develop

Styles

A field wraps a button or input with a label, helper text, and error message. The tng-field element is the wrapper; the tng-field-control element is the interactive shell, available as a button or an input.

Field

A field wraps a control with a label, helper text, and error message.

<div class="tng-field">
  <label class="tng-field-label">Username</label>
  <div class="tng-field-control">
    <input class="tng-field-control-input" type="text" />
  </div>
  <div class="tng-field-info">
    <i class="tng-icon icon-info"></i>
    <span>Helper text for the input field.</span>
  </div>
  <div class="tng-field-error">
    <i class="tng-icon icon-error"></i>
    <span>Error message if applicable.</span>
  </div>
</div>

Username

Helper text for the input field.

Error message if applicable.

Control

The 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-field-control">
  <button class="tng-field-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-field-control">
  <input class="tng-field-control-input" type="text" />
</div>

Elements

Icon Button

<div class="tng-field-control">
  <input class="tng-field-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-field-control">
  <i aria-hidden="true" class="tng-icon icon-car"></i>
  <button class="tng-field-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-field-control">
  <label class="tng-field-control-label">Email address</label>
  <input class="tng-field-control-input" type="text" />
</div>
<div class="tng-field-control">
  <label class="tng-field-control-label is-lg">Email address</label>
  <input class="tng-field-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-field-control">
  <button class="tng-field-control-button is-required">
    Select an item
  </button>
  <i aria-hidden="true" class="tng-icon icon-chevron-down"></i>
</div>
<div class="tng-field-control">
  <label class="tng-field-control-label">Email address</label>
  <input class="tng-field-control-input" type="text" required />
</div>

Select an item

Email address

States

Disabled

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

<div class="tng-field-control">
  <button class="tng-field-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-field-control is-invalid">
  <input class="tng-field-control-input" type="text" />
</div>