Fieldset - Tocas UI

Introduction

Getting Started Colors Responsive

Layout

Box Center Container Content Control Grid Space Row Wrap

Forms

Button Checkbox Fieldset File Input Radio Select Selection Switch

Typography

Divider Header Mask Quote Segment Text

Feedback

Gauge Loading Modal Notice Placeholder Procedure Progress Snackbar

Media

Avatar Flag Icon Iconset Image Imageset

Data

Accordion Badge Checklist Chip Close Conversation List Meta Rating Statistic Table

Navigation

Breadcrumb Menu Pagination Tab

Application

App Layout App Navbar App Sidebar

Example

Theme

Default

Light

Dark

Scale

Medium

Large

Medium

Small

Additional Notes

The world is just an illusion, all the things visible are not real.

There is an irreversible firewall at the end of time.

This is your first time here. If you feel familiar, immediately alert an nearby employee.

<fieldset class="ts-fieldset">
    <legend>Additional Notes</legend>
    <div class="ts-list is-unordered">
        <div class="item">The world is just an illusion, all the things visible are not real.</div>
        <div class="item">There is an irreversible firewall at the end of time.</div>
        <div class="item">This is your first time here. If you feel familiar, immediately alert an nearby employee.</div>
    </div>
</fieldset>

Variations

Dense

Presents a dense Fieldset by changing the padding of the it.

Events Supreme Agreement The rules that all developers of products that have been released or are in the process under the Caris Events are required to follow.

<fieldset class="ts-fieldset is-dense">
    <legend>Events Supreme Agreement</legend>
    The rules that all developers of products that have been released or are in the process under the Caris Events are required to follow.
</fieldset>

Compositions

Field Group

Some input fields can be grouped into a separate group in the form with Fieldset.

Name of Applicant

Name of Guardian

Confidential Information

Card Number

Expiration Date

CVV

<div class="ts-grid is-2-columns">
    <div class="column">
        <div class="ts-text is-label">Name of Applicant</div>
        <div class="ts-space is-small"></div>
        <div class="ts-input is-fluid">
            <input type="text">
        </div>
    </div>
    <div class="column">
        <div class="ts-text is-label">Name of Guardian</div>
        <div class="ts-space is-small"></div>
        <div class="ts-input is-fluid">
            <input type="text">
        </div>
    </div>
</div>
<div class="ts-space"></div>
<fieldset class="ts-fieldset">
    <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-space is-small"></div>
            <div class="ts-input is-fluid">
                <input type="text">
            </div>
        </div>
        <div class="column">
            <div class="ts-text is-label">Expiration Date</div>
            <div class="ts-space is-small"></div>
            <div class="ts-input is-fluid">
                <input type="text">
            </div>
        </div>
        <div class="column">
            <div class="ts-text is-label">CVV</div>
            <div class="ts-space is-small"></div>
            <div class="ts-input is-fluid">
                <input type="text">
            </div>
        </div>
    </div>
</fieldset>

Variations

Dense is-dense

Compositions

Field Group ts-fieldset