Inputs

Text inputs and other form controls styled for consistency and usability.

Text Input

<label>
  Name
  <input type="text" placeholder="Enter your name">
</label>

Email Input

<label>
  Email
  <input type="email" placeholder="you@example.com">
</label>

Password Input

<label>
  Password
  <input type="password" placeholder="Enter password">
</label>

Search Input

<label>
  Search
  <input type="search" placeholder="Search...">
</label>

Number Input

<label>
  Quantity
  <input type="number" min="0" max="100" value="1">
</label>

Textarea

<label>
  Message
  <textarea rows="4" placeholder="Enter your message"></textarea>
</label>

Date and Time

<label>
  Date
  <input type="date">
</label>

<label>
  Time
  <input type="time">
</label>

<label>
  Date and Time
  <input type="datetime-local">
</label>

Range Slider

<label>
  Volume
  <input type="range" min="0" max="100" value="50">
</label>

Color Picker

<label>
  Color
  <input type="color" value="#09090b">
</label>

File Upload

<label>
  Upload file
  <input type="file">
</label>

Disabled State

<label>
  Disabled input
  <input type="text" value="Can't edit this" disabled>
</label>

Read-only State

<label>
  Read-only input
  <input type="text" value="Read only value" readonly>
</label>