Skip to content
CWF Lite

Form Input

Basic input

Section titled “Basic input”
  <label class="label" for="text">Text</label>
  <input class="input" type="text" id="text" placeholder="Text …" />


  <label class="label" for="disabled">Disabled</label>
  <input class="input" type="text" id="disabled" placeholder="Disabled …" disabled />


  <label class="label" for="email">Email</label>
  <input class="input" type="email" id="email" placeholder="Email …" />


  <label class="label" for="tel">tel</label>
  <input class="input" type="tel" id="tel" placeholder="tel …" />


  <label class="label" for="url">Url</label>
  <input class="input" type="url" id="url" placeholder="Url …" />


  <label class="label" for="number">Number</label>
  <input class="input" type="number" id="number" placeholder="Number …" />


  <label class="label" for="search">Search</label>
  <input class="input" type="search" id="search" placeholder="Search …" />


  <label class="label" for="password">Password</label>
  <input class="input" type="password" id="password" placeholder="Password …" />


  <label class="label" for="select">Select</label>
  <select class="input" id="select">
    <option value="">Select a role</option>
    <option value="developer">Developer</option>
    <option value="designer">Designer</option>
    <option value="manager">Manager</option>
  </select>


  <label class="label" for="multiple">Multiple</label>
  <select class="input" id="multiple" multiple>
    <option value="">Select a role</option>
    <option value="developer">Developer</option>
    <option value="designer">Designer</option>
    <option value="manager">Manager</option>
  </select>


  <label class="label" for="textarea">Textarea</label>
  <textarea class="input" id="textarea" rows="4" placeholder="Textarea …"></textarea>


  <label class="label" for="radio">Radio</label>
  <input class="input" type="radio" id="radio" />


  <label class="label" for="checkbox">Checkbox</label>
  <input class="input" type="checkbox" id="checkbox" />


  <label class="label" for="color">Colour</label>
  <input class="input" type="color" id="color" placeholder="Color …" />


  <label class="label" for="date">Date</label>
  <input class="input" type="date" id="date" placeholder="Date …" />


  <label class="label" for="datetime-local">Datetime local</label>
  <input class="input" type="datetime-local" id="datetime-local" placeholder="Datetime local …" />


  <label class="label" for="month">Month</label>
  <input class="input" type="month" id="month" placeholder="Month …" />


  <label class="label" for="week">Week</label>
  <input class="input" type="week" id="week" placeholder="Week …" />


  <label class="label" for="time">Time</label>
  <input class="input" type="time" id="time" placeholder="Time …" />


  <label class="label" for="file">File</label>
  <input class="input" type="file" id="file" placeholder="File …" />


  <label class="label" for="range">Range</label>
  <input class="input" type="range" id="range" placeholder="Range …" />


  <label class="label" for="output">Output</label>
  <output class="input" id="output" for="range"></output>


  <label for="datalist" class="label">Datalist</label>
  <input class="input" list="options" id="datalist" placeholder="Type to search..." />
  <datalist id="options">
    <option value="San Francisco"></option>
    <option value="New York"></option>
    <option value="Seattle"></option>
    <option value="Los Angeles"></option>
    <option value="Chicago"></option>
  </datalist>