tessl/npm-uikit

UIkit is a lightweight and modular front-end framework for developing fast and powerful web interfaces.

—

Pending

Overview

Eval results

Files

Form Components

Name: tessl/npm-uikit
Author: tessl

UIkit's form components provide comprehensive styling and functionality for form controls, buttons, and input validation interfaces.

Capabilities

Form Controls

Base styling for form input elements and controls.

/* Input Fields */
.uk-input {
  /* Text input styling */
  max-width: 100%;
  width: 100%;
  border: 0 none;
  padding: 0 10px;
  background: #fff;
  color: #666;
  border: 1px solid #e5e5e5;
  border-radius: 4px;
  font-size: 14px;
  line-height: 40px;
  height: 40px;
}

.uk-input:focus {
  /* Focused input styling */
  outline: 0;
  background-color: #fff;
  color: #666;
  border-color: #1e87f0;
}

/* Select Dropdown */
.uk-select {
  /* Select field styling */
  max-width: 100%;
  width: 100%;
  border: 0 none;
  padding: 0 10px;
  background: #fff;
  color: #666;
  border: 1px solid #e5e5e5;
  border-radius: 4px;
  font-size: 14px;
  line-height: 38px;
  height: 40px;
}

/* Textarea */
.uk-textarea {
  /* Textarea styling */
  max-width: 100%;
  width: 100%;
  border: 0 none;
  padding: 4px 6px;
  background: #fff;
  color: #666;
  border: 1px solid #e5e5e5;
  border-radius: 4px;
  font-size: 14px;
  resize: vertical;
}

/* Radio and Checkbox */
.uk-radio,
.uk-checkbox {
  /* Radio and checkbox base styling */
  display: inline-block;
  height: 16px;
  width: 16px;
  overflow: hidden;
  margin-top: -4px;
  vertical-align: middle;
  -webkit-appearance: none;
  -moz-appearance: none;
  outline: 0;
  cursor: pointer;
}

.uk-radio {
  /* Radio button styling */
  border-radius: 50%;
  background: #fff;
  border: 1px solid #cccccc;
}

.uk-checkbox {
  /* Checkbox styling */
  border-radius: 3px;
  background: #fff;
  border: 1px solid #cccccc;
}

/* Form Size Variants */
.uk-form-small .uk-input,
.uk-form-small .uk-select { /* Small form controls */
  height: 30px;
  padding: 0 6px;
  font-size: 12px;
}

.uk-form-large .uk-input,
.uk-form-large .uk-select { /* Large form controls */
  height: 55px;
  padding: 0 12px;
  font-size: 16px;
}

/* Form Width Variants */
.uk-form-width-xsmall { /* Extra small width */ max-width: 50px; }
.uk-form-width-small { /* Small width */ max-width: 130px; }
.uk-form-width-medium { /* Medium width */ max-width: 200px; }
.uk-form-width-large { /* Large width */ max-width: 500px; }

/* Form States */
.uk-form-danger { /* Danger/error state */ border-color: #f0506e; }
.uk-form-success { /* Success state */ border-color: #32d296; }

/* Form Layout */
.uk-form-horizontal { /* Horizontal form layout */ }
.uk-form-stacked { /* Stacked form layout */ }

Usage Examples:

<!-- Basic Form -->
<form class="uk-form-stacked">
    <div class="uk-margin">
        <label class="uk-form-label" for="form-stacked-text">Text</label>
        <div class="uk-form-controls">
            <input class="uk-input" id="form-stacked-text" type="text" placeholder="Some text...">
        </div>
    </div>
    
    <div class="uk-margin">
        <label class="uk-form-label" for="form-stacked-select">Select</label>
        <div class="uk-form-controls">
            <select class="uk-select" id="form-stacked-select">
                <option>Option 01</option>
                <option>Option 02</option>
            </select>
        </div>
    </div>
    
    <div class="uk-margin">
        <label class="uk-form-label" for="form-stacked-textarea">Textarea</label>
        <div class="uk-form-controls">
            <textarea class="uk-textarea" id="form-stacked-textarea" rows="5" placeholder="Textarea..."></textarea>
        </div>
    </div>
</form>

<!-- Form with Validation States -->
<div class="uk-margin">
    <input class="uk-input uk-form-success" type="text" placeholder="Success state">
</div>
<div class="uk-margin">
    <input class="uk-input uk-form-danger" type="text" placeholder="Danger state">
</div>

<!-- Form Sizes -->
<div class="uk-margin">
    <input class="uk-input uk-form-small" type="text" placeholder="Small">
</div>
<div class="uk-margin">
    <input class="uk-input" type="text" placeholder="Default">
</div>
<div class="uk-margin">
    <input class="uk-input uk-form-large" type="text" placeholder="Large">
</div>

Buttons

Button component with multiple variants and states.

/* Button Base */
.uk-button {
  /* Base button styling */
  margin: 0;
  border: none;
  overflow: visible;
  font: inherit;
  color: inherit;
  text-transform: none;
  -webkit-appearance: none;
  border-radius: 0;
  display: inline-block;
  box-sizing: border-box;
  padding: 0 30px;
  vertical-align: middle;
  font-size: 14px;
  line-height: 38px;
  text-decoration: none;
  text-align: center;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  cursor: pointer;
  transition: 0.1s ease-in-out;
}

/* Button Variants */
.uk-button-default {
  /* Default button */
  background-color: #fff;
  color: #666;
  border-color: #e5e5e5;
}

.uk-button-primary {
  /* Primary button */
  background-color: #1e87f0;
  color: #fff;
  border-color: #1e87f0;
}

.uk-button-secondary {
  /* Secondary button */
  background-color: #222;
  color: #fff;
  border-color: #222;
}

.uk-button-danger {
  /* Danger button */
  background-color: #f0506e;
  color: #fff;
  border-color: #f0506e;
}

.uk-button-text {
  /* Text-only button */
  padding: 0;
  line-height: 1.5;
  background: none;
  color: #333;
}

.uk-button-link {
  /* Link-styled button */
  padding: 0;
  line-height: 1.5;
  background: none;
  color: #1e87f0;
}

/* Button Sizes */
.uk-button-small {
  /* Small button */
  padding: 0 15px;
  line-height: 28px;
  font-size: 11px;
}

.uk-button-large {
  /* Large button */
  padding: 0 40px;
  line-height: 53px;
  font-size: 16px;
}

/* Button States */
.uk-button:hover { /* Hover state */ }
.uk-button:focus { /* Focus state */ }
.uk-button:active { /* Active state */ }
.uk-button:disabled { /* Disabled state */ }

Usage Examples:

<!-- Button Variants -->
<button class="uk-button uk-button-default">Default</button>
<button class="uk-button uk-button-primary">Primary</button>
<button class="uk-button uk-button-secondary">Secondary</button>
<button class="uk-button uk-button-danger">Danger</button>
<button class="uk-button uk-button-text">Text</button>
<button class="uk-button uk-button-link">Link</button>

<!-- Button Sizes -->
<button class="uk-button uk-button-default uk-button-small">Small</button>
<button class="uk-button uk-button-default">Default</button>
<button class="uk-button uk-button-default uk-button-large">Large</button>

<!-- Button States -->
<button class="uk-button uk-button-default" disabled>Disabled</button>

<!-- Button Group -->
<div class="uk-button-group">
    <button class="uk-button uk-button-default">Button</button>
    <button class="uk-button uk-button-default">Button</button>
    <button class="uk-button uk-button-default">Button</button>
</div>

Form Range

Custom range input styling.

/* Range Input */
.uk-range {
  /* Range input base styling */
  -webkit-appearance: none;
  background: transparent;
  padding: 0;
}

.uk-range::-webkit-slider-track {
  /* Webkit track styling */
  height: 3px;
  background: #f8f8f8;
  border: none;
  border-radius: 500px;
}

.uk-range::-webkit-slider-thumb {
  /* Webkit thumb styling */
  -webkit-appearance: none;
  margin-top: -7px;
  height: 17px;
  width: 17px;
  border-radius: 500px;
  background: #fff;
  border: 1px solid #cccccc;
}

.uk-range::-moz-range-track {
  /* Firefox track styling */
  height: 3px;
  background: #f8f8f8;
  border: none;
  border-radius: 500px;
}

.uk-range::-moz-range-thumb {
  /* Firefox thumb styling */
  border: none;
  height: 17px;
  width: 17px;
  border-radius: 500px;
  background: #fff;
  border: 1px solid #cccccc;
}

Usage Examples:

<!-- Range Input -->
<input class="uk-range" type="range" value="2" min="0" max="10" step="0.1">

<!-- Range with Labels -->
<div class="uk-margin">
    <label class="uk-form-label">Volume</label>
    <input class="uk-range" type="range" value="50" min="0" max="100">
</div>

Form Validation

Form validation styling and feedback classes.

/* Validation States */
.uk-form-danger {
  /* Form control error state */
  color: #f0506e;
  border-color: #f0506e !important;
}

.uk-form-success {
  /* Form control success state */
  color: #32d296;
  border-color: #32d296 !important;
}

/* Validation Icons */
.uk-form-icon {
  /* Form icon container */
  position: absolute;
  top: 0;
  width: 40px;
  height: 40px;
  pointer-events: none;
}

.uk-form-icon:not(.uk-form-icon-flip) {
  /* Left positioned icon */
  left: 0;
}

.uk-form-icon-flip {
  /* Right positioned icon */
  right: 0;
}

.uk-form-icon > * {
  /* Icon positioning */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 18px;
  max-height: 18px;
  color: #999;
}

Usage Examples:

<!-- Form with Icons -->
<div class="uk-margin">
    <div class="uk-inline">
        <span class="uk-form-icon" uk-icon="icon: user"></span>
        <input class="uk-input" type="text" placeholder="Username">
    </div>
</div>

<div class="uk-margin">
    <div class="uk-inline">
        <span class="uk-form-icon uk-form-icon-flip" uk-icon="icon: lock"></span>
        <input class="uk-input" type="password" placeholder="Password">
    </div>
</div>

<!-- Validation with Custom Messages -->
<div class="uk-margin">
    <input class="uk-input uk-form-danger" type="text" placeholder="Error state">
    <div class="uk-text-danger uk-text-small">Please enter a valid value</div>
</div>

<div class="uk-margin">
    <input class="uk-input uk-form-success" type="text" placeholder="Success state">
    <div class="uk-text-success uk-text-small">Value is valid</div>
</div>

Form Custom

Custom form control styling for enhanced form elements.

/* Custom Select */
.uk-select:not([multiple]):not([size]) {
  /* Custom select dropdown arrow */
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg...");
  background-repeat: no-repeat;
  background-position: 100% 50%;
  padding-right: 20px;
}

/* File Input */
.uk-form-custom {
  /* Custom file input container */
  position: relative;
  display: inline-block;
  max-width: 100%;
  vertical-align: middle;
}

.uk-form-custom input[type="file"] {
  /* Hidden file input */
  position: absolute;
  top: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  left: 0;
  -webkit-appearance: none;
  opacity: 0;
  cursor: pointer;
}

.uk-form-custom .uk-form-custom-text {
  /* Custom file input text */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

JavaScript API:

/**
 * Form Custom component for enhanced form controls
 */
UIkit.formCustom(element: HTMLElement | string, options?: {
  /** Target input selector */
  target?: string;
}): FormCustomComponent;

interface FormCustomComponent {
  /** Form custom element */
  $el: HTMLElement;
}

Usage Examples:

<!-- Custom File Input -->
<div uk-form-custom>
    <input type="file">
    <button class="uk-button uk-button-default" type="button" tabindex="-1">Select</button>
</div>

<!-- Custom File Input with Filename Display -->
<div uk-form-custom="target: true">
    <input type="file">
    <input class="uk-input uk-form-width-medium" type="text" placeholder="Select file" disabled>
</div>

<!-- Custom File Input Button -->
<div uk-form-custom>
    <input type="file" multiple>
    <button class="uk-button uk-button-primary" type="button" tabindex="-1">
        <span uk-icon="cloud-upload"></span> Upload Files
    </button>
</div>

Form Layout

Layout utilities for organizing form elements.

/* Form Layout Classes */
.uk-form-horizontal {
  /* Horizontal form layout */
  display: flex;
  flex-wrap: wrap;
  margin-left: -15px;
}

.uk-form-horizontal > * {
  /* Horizontal form items */
  padding-left: 15px;
}

.uk-form-controls-text {
  /* Form control text alignment */
  display: inline-block;
  margin-top: 7px;
}

/* Form Labels */
.uk-form-label {
  /* Form label styling */
  color: #333;
  font-size: 14px;
}

/* Form Legend */
.uk-fieldset {
  /* Fieldset styling */
  border: 0;
  margin: 0;
  padding: 0;
}

.uk-legend {
  /* Legend styling */
  font-size: 20px;
  line-height: 1.4;
  color: #333;
  margin-bottom: 20px;
}

Usage Examples:

<!-- Horizontal Form -->
<form class="uk-form-horizontal uk-margin-large">
    <div class="uk-margin">
        <label class="uk-form-label" for="form-horizontal-text">Text</label>
        <div class="uk-form-controls">
            <input class="uk-input" id="form-horizontal-text" type="text" placeholder="Some text...">
        </div>
    </div>
    
    <div class="uk-margin">
        <div class="uk-form-label">Radio</div>
        <div class="uk-form-controls">
            <label><input class="uk-radio" type="radio" name="radio1" checked> Option 01</label><br>
            <label><input class="uk-radio" type="radio" name="radio1"> Option 02</label>
        </div>
    </div>
</form>

<!-- Fieldset with Legend -->
<fieldset class="uk-fieldset">
    <legend class="uk-legend">Legend</legend>
    <div class="uk-margin">
        <input class="uk-input" type="text" placeholder="Input">
    </div>
    <div class="uk-margin">
        <select class="uk-select">
            <option>Option 01</option>
            <option>Option 02</option>
        </select>
    </div>
</fieldset>

Install with Tessl CLI