Input

Text inputs, email, password, and other text-like inputs are styled automatically. Use .nano-input for explicit styling or wrap in .nano-field for label + error layout.

Default (native elements)

<input type="text" placeholder="Text input">
<input type="email" placeholder="Email input">
<input type="password" placeholder="Password">
<input type="number" placeholder="Number">
<input type="date">

Textarea

<textarea placeholder="Write your message..."></textarea>

Field with label and error

Email is required

<div class="nano-field">
  <label for="email" class="nano-label nano-label--required">Email</label>
  <input id="email" type="email" class="nano-input"
         aria-invalid="true" aria-describedby="email-error"
         placeholder="you@example.com">
  <p id="email-error" class="nano-field__error" role="alert">Email is required</p>
</div>

Input group

<div class="nano-input-group">
  <input type="text" class="nano-input" placeholder="Search...">
  <button class="nano-btn nano-btn--primary">Search</button>
</div>

Disabled

<input type="text" placeholder="Disabled input" disabled>