Control - Tocas UI

Example

Theme

Auto

Light

Dark

Scale

Medium

Large

Medium

Small

Username

<div class="ts-control">
    <div class="label">Username</div>
    <div class="content">
        <div class="ts-input">
            <input type="text">
        </div>
    </div>
</div>

Variations

Label Aligns

A control can have its label text aligned to a side.

Age

<div class="ts-control">
    <div class="label is-start-aligned">Age</div>
    <div class="content">
        <div class="ts-input">
            <input type="number">
        </div>
    </div>
</div>

Padded

A control can pad its content to be aligned with the label text, required for text or shorter elements.

Email Address

[email protected]

Block Ads

Enable

<div class="ts-control">
    <div class="label">Email Address</div>
    <div class="content is-padded">
        [email protected]
    </div>
</div>
<div class="ts-control">
    <div class="label">Block Ads</div>
    <div class="content is-padded">
        <label class="ts-switch">
            <input type="checkbox" checked />
            Enable
        </label>
    </div>
</div>

Fluid

A control can have its content to take the width of its container.

Nickname

<div class="ts-control">
    <div class="label">Nickname</div>
    <div class="content is-fluid">
        <div class="ts-input">
            <input type="text">
        </div>
    </div>
</div>

Wide

A control can use more space for its content.

Label Text

<div class="ts-control">
    <div class="label">Label Text</div>
    <div class="content">
        <div class="ts-input">
            <input type="text">
        </div>
    </div>
</div>
<div class="ts-control is-wide">
    <div class="label">Label Text</div>
    <div class="content">
        <div class="ts-input">
            <input type="text">
        </div>
    </div>
</div>

Stacked

A control can stack its label and content vertically, ideal for using with Responsive on mobile devices.

Username

<div class="ts-control is-stacked">
    <div class="label">Username</div>
    <div class="content">
        <div class="ts-input">
            <input type="text">
        </div>
    </div>
</div>

Compositions

Section Divider

Separate two unrelated controls with a section divider.

Username

Password

Promotions

I want to receive email notifications.

<div class="ts-wrap is-vertical">
    <div class="ts-control">
        <div class="label">Username</div>
        <div class="content">
            <div class="ts-input">
                <input type="text">
            </div>
        </div>
    </div>
    <div class="ts-control">
        <div class="label">Password</div>
        <div class="content">
            <div class="ts-input">
                <input type="password">
            </div>
        </div>
    </div>
    <div class="ts-divider"></div>
    <div class="ts-control">
        <div class="label">Promotions</div>
        <div class="content is-padded">
            <label class="ts-switch">
                <input type="checkbox" checked />
                I want to receive email notifications.
            </label>
        </div>
    </div>
</div>

Block Content

Separate out another logical section with Content.

Real Name

Danger Zone

Caution, you will not be able to undo this action.

<div class="ts-wrap is-vertical">
    <div class="ts-control">
        <div class="label">Real Name</div>
        <div class="content">
            <div class="ts-input">
                <input type="text">
            </div>
        </div>
    </div>
    <div class="ts-divider"></div>
    <div class="ts-control">
        <div class="label">Danger Zone</div>
        <div class="content">
            <div class="ts-content is-rounded is-secondary is-padded">
                <button class="ts-button is-outlined is-negative">
                    Delete User
                </button>
                <div class="ts-text is-description has-top-spaced-small">
                    Caution, you will not be able to undo this action.
                </div>
            </div>
        </div>
    </div>
</div>

CSS Variables

	Description	Default Value	Target
--label-width	The width of the text label.	`220px`	`.ts-control`

Looking for similar components?

Grid