Fieldset
Groups the form fields or content with a special block.
Example
Theme
Default
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

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
Compositions
Designed by Yami Odymel from Taiwan with the love of the contributors ❤️. The source code is licensed under MIT and the documents are CC 0 public domain. Tocas UI is a design language of Caris Events, which is owned by Sorae & Co.
Translators: Yami Odymel