Novus Technologies Novus Technologies design kit v0.9.0
Menu
Overview

General

ButtonBadgePillsAvatarBrand lockup

Layout

ContainerGrid & RowSurface & text utilitiesApp shellPage header

Data Display

CardTableChartsCalendarStatsBulletsLeadersLogo wallCollapse & DisclosureTimelineValue chainDescriptions

Feedback

AlertProgressModalSlide-overSkeletonEmpty state

Forms

Field & InputDropdownLead form & CTA rowDate pickerFilter bar

Navigation

NavSide navigationTop navigationApp switcherUser menuStepperTabsBreadcrumbPagination

Templates

Sign-in pageSigned-out pageSettings layout

Theming

Browser tabProduct themes

Forms

Field & Input

Labelled text input, select, and textarea with help and error states.

.field · .field--error · .field__help · .field__error · .input · .select · .textarea

We reply within one business day.
Field with help text
<div class="field" style="max-width:360px">
  <label for="f-email">Work email</label>
  <input class="input" id="f-email" type="email" placeholder="name@novustech.com.sg">
  <span class="field__help">We reply within one business day.</span>
</div>
Select and textarea
<div style="max-width:360px">
  <div class="field">
    <label for="f-market">Market</label>
    <span class="selectwrap"><select class="select" id="f-market">
      <option>Singapore</option>
      <option>Philippines</option>
      <option>Sri Lanka</option>
      <option>Indonesia</option>
    </select></span>
  </div>
  <div class="field">
    <label for="f-msg">Message</label>
    <textarea class="textarea" id="f-msg" rows="3"></textarea>
  </div>
</div>
Organisation is required.
Error state
<div class="field field--error" style="max-width:360px">
  <label for="f-org">Organisation</label>
  <input class="input" id="f-org" type="text" aria-invalid="true">
  <span class="field__error">Organisation is required.</span>
</div>
Set by your administrator.
Select and copy this number.
Locked fields (disabled and readonly)
<div style="max-width:360px">
  <div class="field">
    <label for="f-lock-dis">Tenant ID</label>
    <input class="input" id="f-lock-dis" type="text" value="tnt-88214" disabled>
    <span class="field__help">Set by your administrator.</span>
  </div>
  <div class="field">
    <label for="f-lock-ro">Account number</label>
    <input class="input" id="f-lock-ro" type="text" value="0044 1900 7721" readonly>
    <span class="field__help">Select and copy this number.</span>
  </div>
</div>

Usage

  • Every input has a real <label>; help and error lines are part of the field block.
  • Focus shows the accent border plus the token focus ring, never remove the visible focus state.
  • A locked field mutes its surface and text on the muted background. disabled shows a not-allowed cursor and cannot be focused; readonly keeps a text cursor and stays selectable and copyable, so it never carries a padlock icon.
  • Touch targets stay ≥ 44px on mobile.
Dropdown ›