• Typography
  • Buttons
  • Inputs
  • Controls
  • Navigation
  • Notifications
  • Boxes
  • Tables
  • Icons
  • Media
  • Components
  • View the code
    <input type="text" class="input text" name="name" placeholder="this is a simple text input" />
  • View the code
     
    <input type="text" class="input text disabled" name="name" placeholder="this is a simple disabled text input" disabled />
  • View the code
     
    <label for="input-with-label">Input Label</label><input type="text" class="input text" name="name" id="input-with-label" placeholder="this is a simple text input with label" />
  • View the code
     
    <label class="block-type" for="input-with-label2">Input Label</label><input type="text" class="input text" name="name" id="input-with-label2" placeholder="this is a simple text input with label on top" />
  • View the code
     
    <input type="text" class="input text expanding" name="name" placeholder="this is an expanding text input" />
  • View the code
     
    <input type="password" class="input text" name="name" placeholder="this is a simple password input" />
  • View the code

    UIKit Password Reveal

    Show
     
    <div class="uk-form-password input-wrapper with-icon">
        <input type="password" class="input text" name="name" placeholder="this is a simple password input" />
        <a href="#" class="uk-form-password-toggle" data-uk-form-password>Show</a>
    </div>
  • View the code
     
    <input type="text" class="input text error" name="name" placeholder="this is an error validating text input" />
  • View the code
     
    <span class="input-wrapper with-icon">
        <input type="text" class="input text error" name="name" placeholder="this is an error validating text input with icon" />
        <span class="icon"></span>
    </span>
  • View the code
     
    <input type="text" class="input text ok" name="name" placeholder="this is a valid validating text input" />
  • View the code
     
    <span class="input-wrapper with-icon">
        <input type="text" class="input text ok" name="name" placeholder="this is a valid validating text input with icon" />
        <span class="icon"></span>
    </span>
  • View the code

    UIKit Autocomplete Input

     
    <div class="uikit-component">
        <div class="uk-autocomplete" data-uk-autocomplete="{source: 'js/json/autocomplete.json'}">
            <input type="text" class="input text" name="name" placeholder="this is an autocomplete input" required />
        </div>
    </div>
  • View the code

    UIKit Search with JSON Results

     
    <div class="uikit-component">
        <form class="uk-search" data-uk-search="{source: 'js/json/search-results.json'}">
            <input type="search" class="input text search uk-search-field" name="name" placeholder="" />
            <button class="uk-search-close" type="reset" title="Close Search Results"></button>
        </form>
    </div>
  • View the code

    Integer Number Input

     
    <input type="number" class="input text number" name="number" value="1" min="1" max="15" step="1" />
  • View the code

    Decimal Number Input

     
    <input type="number" class="input text number" name="number" value="1.0" min="1.0" max="10.0" step="0.1" />
  • View the code
     
    <span class="input-wrapper with-icon">
        <input type="text" class="input text" name="name" placeholder="this is a text input with icon" />
        <span class="icon"></span>
    </span>
  • View the code
     
    <span class="input-wrapper multiple">
        <input type="text" class="input text" name="name" placeholder="this is a text input with button" />
        <a href="#" class="button only-icon"><span class="icon"></span></a>
    </span>
  • View the code
     
    <textarea class="input text" name="name" cols="70" rows="10">This is a simple textarea</textarea>
  • View the code
     
    <button type="submit" class="input button">Input Button</button>
  • View the code
     
    <label for="radio1">A checked simple radio control</label><input type="radio" class="input radio" name="radio" id="radio1" value="value" checked="checked" />
    <label for="radio2">An unchecked simple radio control</label><input type="radio" class="input radio" name="radio" id="radio2" value="value" />
  • View the code
     
    <input type="radio" class="input radio custom" name="custom-radio" id="radio3" value="value" checked="checked" /><label for="radio3" class="first">ON</label>
    <input type="radio" class="input radio custom" name="custom-radio" id="radio4" value="value" /><label for="radio4" class="last">OFF</label>
  • View the code
     
    <input type="radio" class="input radio custom alt" name="custom-alt-radio" id="radio5" value="value" checked="checked" /><label for="radio5" class="first">ON</label>
    <input type="radio" class="input radio custom alt" name="custom-alt-radio" id="radio6" value="value" /><label for="radio6" class="last">OFF</label>
  • View the code
     
    <label for="checkbox1">A checked checkbox control</label><input type="checkbox" class="input checkbox" name="checkbox" id="checkbox1" value="value" checked="checked" />
    <label for="checkbox2">An unchecked checkbox control</label><input type="checkbox" class="input checkbox" name="checkbox" id="checkbox2" value="value" />
  • View the code
     
    <input type="checkbox" class="input checkbox custom" name="customcheckbox" id="checkbox3" value="value" checked="checked" /><label for="checkbox3"><span class="icon"></span></label>
    <input type="checkbox" class="input checkbox custom" name="custom-checkbox" id="checkbox4" value="value" /><label for="checkbox4"><span class="icon"></span></label>
  • View the code
     
    <input type="file" class="input" name="file" />
  • View the code this component uses the uploadFile function which you can find in the js/main.js file from your framework root directory
     
    <div class="input-wrapper multiple">
        <input type="text" class="input text" name="text" value="Choose a file" disabled="disabled" />
        <label for="file-input" class="button file">Upload File<span class="icon right"></span></label><input type="file" class="input" name="file" id="file-input" />
    </div>
  • View the code

    UIKit Upload

    Attach files by dropping them here or
    select them manually
     
    <div class="uikit-component">
        <div id="upload-drop" class="uk-placeholder">
            <span class="file"><span class="icon left"></span> Attach files by dropping them here or</span>
            <div class="uk-form-file">select them manually
                <input id="upload-select" type="file">
            </div>
        </div>
        <div id="progressbar" class="uk-progress uk-hidden">
            <div class="uk-progress-bar" style="width: 0%;"></div>
        </div>
    </div>
  • View the code
     
    <select class="input">
        <option value="item1">Select Item 1</option>
        <option value="item2">Select Item 2</option>
        <option value="item3">Select Item 3</option>
        <option value="item4">Select Item 4</option>
        <option value="item5">Select Item 5</option>
    </select>
  • View the code
     
    <select class="input multiple" multiple>
        <option value="item1">Select Item 1</option>
        <option value="item2">Select Item 2</option>
        <option value="item3">Select Item 3</option>
        <option value="item4">Select Item 4</option>
        <option value="item5">Select Item 5</option>
    </select>
  • View the code

    UIKit Datepicker

     
    <div class="uikit-component">
        <input type="text" class="input text" name="datepicker" data-uk-datepicker="{format: 'DD.MM.YYYY'}" />
    </div>
  • View the code

    UIKit Timepicker

     
    <div class="uikit-component">
        <input type="text" class="input text timepicker" name="timepicker" data-uk-timepicker />
    </div>
  • View the code

    UIKit Meridian Time Timepicker

     
    <div class="uikit-component">
        <input type="text" class="input text timepicker" name="timepicker" data-uk-timepicker="{format: '12h'}" />
    </div>
  • View the code
     
    <input type="text" class="input text blocknote" name="blocknote" placeholder="this is a blocknote-style text input" />
  • View the code
     
    <input type="text" class="input text editable" name="editable" placeholder="this is a triggered editable input" />
  • View the code
     
    <input type="text" class="input text thin" name="name" placeholder="this is a simple thin text input" />
Blackhole - Released under MIT license