FormBrowse form components
Input
Text input with hover, focus, invalid, and 3 sizes. Combine with .lm-input-group for prefix/suffix addons.
Live preview
@.com
Usage
Adapters:React stableVue stable
index.html
<label class="lm-field">
<span class="lm-label lm-required">Company email</span>
<div class="lm-input-group">
<span class="lm-input-addon">@</span>
<input class="lm-input" type="email" required />
</div>
</label>CSS classes (5)
| Class | Description |
|---|---|
lm-input | Base input |
lm-input-{size} | sm | md | lg |
lm-input-group | Joined input + addons wrapper |
lm-input-addon | Prefix or suffix slot |
lm-input-{state} | success | warning | danger |
React props (3)
| Prop | Type | Default | Description |
|---|---|---|---|
size | Size | md | — |
state | default | success | warning | danger | — | — |
addonStart / addonEnd | ReactNode | — | — |
Accessibility
- Every control needs a visible <label> or aria-label.
- Use aria-describedby to link hints and error messages.
- Never rely on color alone for invalid state — pair with text + icon.
- Required fields use aria-required and an inline marker.
Spotted something wrong? Edit this entry on GitHub.