Input
Single-line text entry. Styles every native input type: text, email, password, search, number, date, time, color.
Types
<div class="mn-stack" style="max-width:22rem">
<input class="mn-input" type="text" placeholder="Text" aria-label="Text">
<input class="mn-input" type="password" value="hunter2" aria-label="Password">
<input class="mn-input" type="date" aria-label="Date">
<input class="mn-input" type="search" placeholder="Search…" aria-label="Search">
</div>Sizes
<div class="mn-stack" style="max-width:22rem">
<input class="mn-input mn-input-sm" placeholder="Small" aria-label="Small">
<input class="mn-input" placeholder="Default" aria-label="Default">
<input class="mn-input mn-input-lg" placeholder="Large" aria-label="Large">
</div>States
<div class="mn-stack" style="max-width:22rem">
<input class="mn-input" value="Disabled" disabled aria-label="Disabled">
<input class="mn-input" value="Read only" readonly aria-label="Read only">
<input class="mn-input" value="Invalid" aria-invalid="true" aria-label="Invalid">
</div>Installation
Everything ships in one stylesheet. There is nothing to import per component.
<link rel="stylesheet" href="https://mian.ro/dist/mian.css">Prefer to own the files? /r/input.json is a registry item with this component's CSS and example markup, ready to copy into your project with any tool that reads the open registry-item format.
Class reference
| Class / attribute | Description |
|---|---|
| mn-input | Base input. |
| mn-input-sm · mn-input-lg | Sizes. |
| aria-invalid="true" | Error state. |
Accessibility
- Use the right type and autocomplete values so mobile keyboards and password managers help.
- Placeholder is not a label.