Label

A labeled form field with hint text, required markers, and validation states.

Email address*

We'll never share your email.

Password*

Password must be at least 8 characters.

Usernameoptional

<div class="lbl">
  <div class="lbl-text">Email<span class="req">*</span></div>
  <input class="lbl-input" type="email" placeholder="Enter email">
  <div class="lbl-hint">We'll never share your email.</div>
</div>

<!-- Error state -->
<div class="lbl lbl-error">
  <div class="lbl-text">Password</div>
  <input class="lbl-input" type="password">
  <div class="lbl-hint">Must be 8+ characters.</div>
</div>

Installation

Built with pure HTML and CSS. Include ds-shared.css in your project.

pnpm add @norbielink/ds

API Reference

Classes

Class	Description
`lbl`	Flex column container
`lbl-text`	Label text
`.req`	Required asterisk (red)
`.lbl-optional`	Optional hint text
`lbl-input`	Styled text input
`lbl-hint`	Helper text below input
`lbl-error`	Error state modifier (red border + hint)
`lbl-dk`	Dark mode modifier

← Previous Input OTP Next → Lists