Input - Tocas UI

Disabled

An input field can show that it is disabled.

<div class="ts-input">
    <input type="text" placeholder="Username" disabled>
</div>

Solid

An input can have a solid background.

<div class="ts-input is-solid">
    <input type="text" placeholder="Send message...">
</div>

Underlined

An input can have a solid background and an underline.

<div class="ts-input is-underlined">
    <input type="text" placeholder="Search">
</div>

Basic

A basic input has no padding and borders.

<div class="ts-input is-basic is-start-icon">
    <span class="ts-icon is-magnifying-glass-icon"></span>
    <input type="text" placeholder="Enter keywords...">
</div>

Circular

An input can be circular.

<div class="ts-input is-circular">
    <input type="text" placeholder="Search from 1,382 users…">
</div>

Resizable

A textarea can be resized vertically.

<div class="ts-input is-resizable">
    <textarea placeholder="Reply the mail..."></textarea>
</div>

Labeled

An input can be formatted with a label.

$

https:// .co

.00

<div class="ts-input is-start-labeled">
    <span class="label">$</span>
    <input type="text">
</div>
<div class="ts-input is-labeled">
    <span class="label">https://</span>
    <input type="text">
    <span class="label">.co</span>
</div>
<div class="ts-input is-end-labeled">
    <input type="text">
    <span class="label">.00</span>
</div>

Negative

An input can show the data contains errors.

<div class="ts-input is-negative">
    <input type="text" placeholder="Email address">
</div>

Side Icon

An input can be formatted with icons.

<div class="ts-input is-start-icon">
    <span class="ts-icon is-phone-icon"></span>
    <input type="text" placeholder="Cellphone">
</div>
<div class="ts-input is-icon">
    <span class="ts-icon is-phone-icon"></span>
    <input type="text" placeholder="Cellphone">
    <span class="ts-icon is-triangle-exclamation-icon"></span>
</div>
<div class="ts-input is-end-icon">
    <input type="text" placeholder="Password">
    <span class="ts-icon is-lock-icon"></span>
</div>

Sizes

An input can vary in size.

<div class="ts-input is-small">
    <input type="text" placeholder="Small input">
</div>
<div class="ts-input">
    <input type="text" placeholder="Default input">
</div>
<div class="ts-input is-large">
    <input type="text" placeholder="Large input">
</div>

Density

An input can adjust its height for a tighter or more relaxed look.

<div class="ts-input is-dense">
    <input type="text" placeholder="Dense input">
</div>
<div class="ts-input">
    <input type="text" placeholder="Default input">
</div>
<div class="ts-input is-relaxed">
    <input type="text" placeholder="Relaxed input">
</div>

Color Picker

Native HTML input fields for color.

<div class="ts-input">
    <input type="color">
</div>

Date and Time

Native HTML input fields for time, date.

<div class="ts-input">
    <input type="datetime-local">
</div>
<div class="ts-input">
    <input type="date">
</div>
<div class="ts-input">
    <input type="time">
</div>
<div class="ts-input">
    <input type="month">
</div>
<div class="ts-input">
    <input type="week">
</div>