Components

These components demonstrate how to build scalable semantic UI with TailUI.

Fieldset

Group related form fields with a legend and border.

Preview

Personal Information

First name

Last name

Code

1<fieldset class="ui-fieldset">
2  <legend class="ui-legend">Personal Information</legend>
3  <div class="ui-fieldset-content">
4    <div class="ui-form-group">
5      <label class="ui-label">First name</label>
6      <input type="text" class="ui-input" placeholder="John" />
7    </div>
8    <div class="ui-form-group">
9      <label class="ui-label">Last name</label>
10      <input type="text" class="ui-input" placeholder="Doe" />
11    </div>
12  </div>
13</fieldset>
14
15<!-- Disabled fieldset -->
16<fieldset class="ui-fieldset" disabled>
17  <legend class="ui-legend">Disabled Section</legend>
18  <div class="ui-fieldset-content">
19    <input type="text" class="ui-input" value="Read only" />
20  </div>
21</fieldset>