Winduum

Appearance

Control ​

Form control as it should be!

This component supports input, select and textarea including all input types

  • text, color, date, datetime-local, email, file, hidden, month, number, password, search, tel, time, url, week

Other input types are supported in other components

View Source 

Installation ​

Follow instructions for individual framework usage below

  • winduum 
  • winduum-vue 
  • winduum-react 

Usage ​

css
@import "winduum/src/ui/control/index.css" layer(components);

Variants ​

  • default 
  • interactive 
  • floating 
  • floating-interactive 
  • file 
  • color 
  • select 
  • select-multiple 
  • icon 

Props ​

  • default-props 
  • interactive-props 
  • floating-props 
  • color-props 
  • select-props 
  • icon-props 

Tokens ​

  • invalid 

Examples ​

Basic ​

html
<div class="ui-control">
    <input type="text">
</div>
vue
<script setup lang="ts">
    import { UiControl } from '@/components/ui/control'
</script>

<template>
    <UiControl>
        <input type="text">
    </UiControl>
</template>
jsx
import { UiControl } from "@/components/ui/control"

export function Example() {
    return (
        <>
            <UiControl>
                <input type="text" />
            </UiControl>
        </>
    )
}

Icon ​

You can position any content to start and end of the control.
Padding is automatically handled by CSS up to 2 icons or you can do it manually.

  • --ui-control-icon-count-s - number of icons at the start of the control
  • --ui-control-icon-count-e- number of icons at the end of the control
  • --ui-control-s - manually change start padding in px according to content
  • --ui-control-e - manually change end padding in px according to content
html
<div class="ui-control">
    <input type="text" placeholder="Enter a value.." required>
    <div class="ms-auto">
        <svg class="text-error" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z" />
        </svg>
        <span>EUR</span>
    </div>
</div>
<div class="ui-control">
    <input type="text" placeholder="Enter a value.." required>
    <svg class="me-auto" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" d="M6 13.5V3.75m0 9.75a1.5 1.5 0 010 3m0-3a1.5 1.5 0 000 3m0 3.75V16.5m12-3V3.75m0 9.75a1.5 1.5 0 010 3m0-3a1.5 1.5 0 000 3m0 3.75V16.5m-6-9V3.75m0 3.75a1.5 1.5 0 010 3m0-3a1.5 1.5 0 000 3m0 9.75V10.5" />
    </svg>
</div>
html
<div class="ui-control">
    <select>
        <option selected="" value="">- select an option -</option>
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
        <option value="3">Option 3</option>
    </select>
    <svg class="ms-auto text-error" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z" />
    </svg>
    <label>Select</label>
</div>
<div class="ui-control">
    <select>
        <option selected="" value="">- select an option -</option>
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
        <option value="3">Option 3</option>
    </select>
    <svg class="me-auto" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" d="M6 13.5V3.75m0 9.75a1.5 1.5 0 010 3m0-3a1.5 1.5 0 000 3m0 3.75V16.5m12-3V3.75m0 9.75a1.5 1.5 0 010 3m0-3a1.5 1.5 0 000 3m0 3.75V16.5m-6-9V3.75m0 3.75a1.5 1.5 0 010 3m0-3a1.5 1.5 0 000 3m0 9.75V10.5" />
    </svg>
    <label>Select</label>
</div>

Textarea ​

html
<div class="ui-control">
    <textarea id="textarea"></textarea>
</div>

Select ​

html
<div class="ui-control">
    <select>
        <option selected="" value="">- select an option -</option>
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
        <option value="3">Option 3</option>
    </select>
</div>

Placeholder ​

html
<div class="ui-control">
    <input type="text" placeholder="Enter a value..">
</div>

Label ​

html
<div class="c-field">
    <label class="ui-label" for="input">Label</label>
    <div class="ui-control">
        <input type="text" id="input">
    </div>
</div>
html
<div class="c-field">
    <label class="ui-label mb-2" for="select">Select</label>
    <div class="ui-control">
        <select id="select">
            <option selected="" value="">- select an option -</option>
            <option value="1">Option 1</option>
            <option value="2">Option 2</option>
            <option value="3">Option 3</option>
        </select>
    </div>
</div>

Floating Label ​

html
<div class="ui-control">
    <input type="text" id="input" placeholder=" ">
    <label for="input">Label</label>
</div>
html
<div class="ui-control">
    <select>
        <option selected="" value="">- select an option -</option>
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
        <option value="3">Option 3</option>
    </select>
    <label>Select</label>
</div>

Time ​

html
<div class="ui-control">
    <input type="time">
</div>

Date ​

html
<div class="ui-control">
    <input type="date">
</div>

Datetime ​

html
<div class="ui-control">
    <input type="datetime-local">
</div>

Number ​

html
<div class="ui-control">
    <input type="number">
</div>

Color ​

html
<div class="ui-control">
    <input type="color" id="color" oninput="this.nextElementSibling.textContent = this.value">
    <label for="color">#ffffff</label>
</div>

File ​

html
<div class="ui-control">
    <input type="file">
</div>

Required ​

html
<div class="ui-control">
    <input type="text" id="input" placeholder=" " required>
    <label for="input">Label</label>
</div>

Validation ​

html
<form class="validated">
    <div class="ui-control">
        <input type="text" id="input" placeholder=" " required>
        <label for="input">Label</label>
    </div>
</form>
html
<form class="validated">
    <div class="ui-control">
        <select id="select" required>
            <option selected="" value="">- select an option -</option>
            <option value="1">Option 1</option>
            <option value="2">Option 2</option>
            <option value="3">Option 3</option>
        </select>
        <label for="select">Select</label>
    </div>
</form>

Disabled ​

html
<div class="ui-control">
    <input type="text" disabled placeholder="Disabled input ..">
</div>
html
<div class="ui-control">
    <select disabled>
        <option selected="" value="">- select an option -</option>
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
        <option value="3">Option 3</option>
    </select>
</div>

Group ​

You can group controls into groups via ui-group component and combine them with other components like Button

html
<div class="ui-group">
    <div class="ui-control bg-body-secondary w-[--ui-control-height] flex-center justify-center">
        @
    </div>
    <div class="ui-control">
        <input type="tel" required>
    </div>
    <button class="ui-btn">Button</button>
</div>

Released under the MIT License.

Copyright © 2022-present lubomirblazek.cz