Field
Wraps a label, control, hint, and error message into a single vertical-rhythm-aligned unit. Error state activates via aria-invalid="true" on the input.
Default field
index.htmlhtml
<div class="ln-field">
<label class="ln-field__label">Email address</label>
<div class="ln-field__control">
<input type="email" placeholder="[email protected]">
</div>
<span class="ln-field__hint">We'll never share your email.</span>
</div>We'll never share your email.
Error state
index.htmlhtml
<div class="ln-field">
<label class="ln-field__label">Username</label>
<div class="ln-field__control">
<input type="text" aria-invalid="true" value="ab">
</div>
<span class="ln-field__hint">At least 3 characters.</span>
<span class="ln-field__error">Username must be at least 3 characters.</span>
</div>At least 3 characters.Username must be at least 3 characters.
Inline field
index.htmlhtml
<div class="ln-field ln-field--inline">
<label class="ln-field__label">Full name</label>
<div class="ln-field__control">
<input type="text" placeholder="Jane Doe">
</div>
</div>Small size
index.htmlhtml
<div class="ln-field ln-field--sm">
<label class="ln-field__label">ZIP code</label>
<div class="ln-field__control">
<input type="text" placeholder="90210">
</div>
</div>Reference
| Class | Description | Responsive |
|---|---|---|
.ln-field | Field wrapper (label + control + hint + error) | No |
.ln-field__label | Field label | No |
.ln-field__required | Required indicator | No |
.ln-field__optional | Optional indicator | No |
.ln-field__control | Input/select/textarea wrapper | No |
.ln-field__hint | Hint text below the control | No |
.ln-field__error | Error message (visible on aria-invalid) | No |
.ln-field__counter | Character counter | No |
.ln-field--sm | Small input height (2rem) | No |
.ln-field--lg | Large input height (3rem) | No |
.ln-field--inline | Horizontal label + control layout | No |