Fieldset - Tocas UI

Example

Theme

Auto

Light

Dark

Scale

Medium

Large

Medium

Small

Additional Notes

This world is an illusion; nothing is real.

You have never been here.

Just run if everything seems familiar.

<fieldset class="ts-fieldset">
    <legend>Additional Notes</legend>
    <div class="ts-list is-unordered">
        <div class="item">This world is an illusion; nothing is real.</div>
        <div class="item">You have never been here.</div>
        <div class="item">Just run if everything seems familiar.</div>
    </div>
</fieldset>

States

Disabled

A fieldset can show it's disabled; all inputs inside will also be disabled.

Disabled Form

Recipient

Cell Phone

<fieldset class="ts-fieldset" disabled>
    <legend>Disabled Form</legend>
    <div class="ts-grid is-2-columns">
        <div class="column">
            <div class="ts-text is-label">Recipient</div>
            <div class="ts-input has-top-spaced">
                <input type="text" value="Yami Odymel">
            </div>
        </div>
        <div class="column">
            <div class="ts-text is-label">Cell Phone</div>
            <div class="ts-input has-top-spaced">
                <input type="text" value="0987123456">
            </div>
        </div>
    </div>
</fieldset>

Variations

Dense

A fieldset can reduce its height.

Supreme Law Rules that all developers under the Caris Events must follow.

<fieldset class="ts-fieldset is-dense">
    <legend>Supreme Law</legend>
    Rules that all developers under the Caris Events must follow.
</fieldset>

Compositions

Form Fieldsets

Fieldsets can group certain input fields together in a form.

Applicant's Name

Guardian's Name

Confidential information

Card Number

Expiry Date

CVV

<div class="ts-grid is-2-columns">
    <div class="column">
        <div class="ts-text is-label">Applicant's Name</div>
        <div class="ts-input has-top-spaced">
            <input type="text">
        </div>
    </div>
    <div class="column">
        <div class="ts-text is-label">Guardian's Name</div>
        <div class="ts-input has-top-spaced">
            <input type="text">
        </div>
    </div>
</div>
<fieldset class="ts-fieldset has-top-spaced">
    <legend>Confidential information</legend>
    <div class="ts-grid is-3-columns">
        <div class="column">
            <div class="ts-text is-label">Card Number</div>
            <div class="ts-input has-top-spaced">
                <input type="text">
            </div>
        </div>
        <div class="column">
            <div class="ts-text is-label">Expiry Date</div>
            <div class="ts-input has-top-spaced">
                <input type="text">
            </div>
        </div>
        <div class="column">
            <div class="ts-text is-label">CVV</div>
            <div class="ts-input has-top-spaced">
                <input type="text">
            </div>
        </div>
    </div>
</fieldset>