Fieldset

Description

The fieldset is normally to find rounding windows or rouding some inputs, as known as input group. The default fieldset in the framework has double border and expects a legend. To change the borders, see how to do this in the Border component page. You can put texts in the corners, or buttons if you want using the fieldset classes.

Recommendation: Take a look in the Window page to check the window features.

Code Examples

Default fieldset in a window. This fieldset has no buttons and no texts, just the legend.

<div class="tui-window">
    <fieldset class="tui-fieldset">
        <legend>Fieldset</legend>
    </fieldset>
</div>

To create a fieldset without legend, use .no-legend class to fix the spacement:

<div class="tui-window">
    <fieldset class="tui-fieldset no-legend">
    </fieldset>
</div>

This is an example with buttons in the fieldset. To move the buttons to the bottom, use .bottom class:

<div class="tui-window">
    <fieldset class="tui-fieldset">
        <legend class="center">Window</legend>
        <button class="tui-fieldset-button left"><span class="green-255-text">■</span></button>
        <button class="tui-fieldset-button"><span class="green-255-text">↕</span></button>
    </fieldset>
</div>

You can put some texts in the fieldset corners. This is an example. If you want to put in the top, just use the .top with the text element.

<div class="tui-window">
    <fieldset class="tui-fieldset">
        <legend class="center">Window</legend>
        <span class="tui-fieldset-text">Lorem</span>
        <span class="tui-fieldset-text right">Ipsum</span>
    </fieldset>
</div>

Some inputs could be bordered with fieldset to create an input group. Use the .tui-input-fieldset to create it.

<fieldset class="tui-input-fieldset">
    <legend>Checkboxes</legend>
    <label class="tui-checkbox">First
        <input type="checkbox" checked />
        <span></span>
    </label>
    ...
</fieldset>

Component Classes

This is the table with available classes for this component.

Class	Description
.tui-fieldset	Creates a fieldset
.tui-input-fieldset	Round inputs with a fieldset to make an input group
.tui-fieldset-button	Creates a button in the fieldset. Move the button to the left side using .left class. Move the button to the bottom using .bottom class.
.tui-fieldset-text	Creates a text in the fieldset. Move the text to the right side using .right class. Move the text to the top using .top class.
no-legend	Fix the fieldset with no legend, to create a space between the fieldset and the top of the window