Fieldset

Fieldset 是用于分组相关表单元素的容器。它包括 fieldset-legend 作为标题，fieldset-label 作为描述。

类名	类型
fieldset	组件	用于 fieldset 容器
fieldset-legend	部分	用于 fieldset 的标题
fieldset-label	部分	用于 fieldset 的描述

Fieldset fieldset-legend 和 fieldset-label

页面标题

您可以稍后在设置中编辑页面标题

<fieldset class="$$fieldset">
  <legend class="$$fieldset-legend">Page title</legend>
  <input type="text" class="$$input" placeholder="My awesome page" />
  <p class="$$fieldset-label">You can edit page title later on from settings</p>
</fieldset>

<fieldset class="$$fieldset">
  <legend class="$$fieldset-legend">Page title</legend>
  <input type="text" class="$$input" placeholder="My awesome page" />
  <p class="$$fieldset-label">You can edit page title later on from settings</p>
</fieldset>

            
                <fieldset class="$$fieldset">
  <legend class="$$fieldset-legend">Page title</legend>
  <input type="text" class="$$input" placeholder="My awesome page" />
  <p class="$$fieldset-label">You can edit page title later on from settings</p>
</fieldset>

<fieldset class="$$fieldset">
  <legend class="$$fieldset-legend">Page title</legend>
  <input type="text" class="$$input" placeholder="My awesome page" />
  <p class="$$fieldset-label">You can edit page title later on from settings</p>
</fieldset>

带有背景和边框的 Fieldset

页面标题

您可以稍后在设置中编辑页面标题

<fieldset class="$$fieldset w-xs bg-base-200 border border-base-300 p-4 rounded-box">
  <legend class="$$fieldset-legend">Page title</legend>
  <input type="text" class="$$input" placeholder="My awesome page" />
  <p class="$$fieldset-label">You can edit page title later on from settings</p>
</fieldset>

<fieldset class="$$fieldset w-xs bg-base-200 border border-base-300 p-4 rounded-box">
  <legend class="$$fieldset-legend">Page title</legend>
  <input type="text" class="$$input" placeholder="My awesome page" />
  <p class="$$fieldset-label">You can edit page title later on from settings</p>
</fieldset>

            
                <fieldset class="$$fieldset w-xs bg-base-200 border border-base-300 p-4 rounded-box">
  <legend class="$$fieldset-legend">Page title</legend>
  <input type="text" class="$$input" placeholder="My awesome page" />
  <p class="$$fieldset-label">You can edit page title later on from settings</p>
</fieldset>

<fieldset class="$$fieldset w-xs bg-base-200 border border-base-300 p-4 rounded-box">
  <legend class="$$fieldset-legend">Page title</legend>
  <input type="text" class="$$input" placeholder="My awesome page" />
  <p class="$$fieldset-label">You can edit page title later on from settings</p>
</fieldset>

带有多个输入的 Fieldset

页面详情标题 Slug 作者

<fieldset class="$$fieldset w-xs bg-base-200 border border-base-300 p-4 rounded-box">
  <legend class="$$fieldset-legend">Page details</legend>
  
  <label class="$$fieldset-label">Title</label>
  <input type="text" class="$$input" placeholder="My awesome page" />
  
  <label class="$$fieldset-label">Slug</label>
  <input type="text" class="$$input" placeholder="my-awesome-page" />
  
  <label class="$$fieldset-label">Author</label>
  <input type="text" class="$$input" placeholder="Name" />
</fieldset>

<fieldset class="$$fieldset w-xs bg-base-200 border border-base-300 p-4 rounded-box">
  <legend class="$$fieldset-legend">Page details</legend>
  
  <label class="$$fieldset-label">Title</label>
  <input type="text" class="$$input" placeholder="My awesome page" />
  
  <label class="$$fieldset-label">Slug</label>
  <input type="text" class="$$input" placeholder="my-awesome-page" />
  
  <label class="$$fieldset-label">Author</label>
  <input type="text" class="$$input" placeholder="Name" />
</fieldset>

            
                <fieldset class="$$fieldset w-xs bg-base-200 border border-base-300 p-4 rounded-box">
  <legend class="$$fieldset-legend">Page details</legend>
  
  <label class="$$fieldset-label">Title</label>
  <input type="text" class="$$input" placeholder="My awesome page" />
  
  <label class="$$fieldset-label">Slug</label>
  <input type="text" class="$$input" placeholder="my-awesome-page" />
  
  <label class="$$fieldset-label">Author</label>
  <input type="text" class="$$input" placeholder="Name" />
</fieldset>

<fieldset class="$$fieldset w-xs bg-base-200 border border-base-300 p-4 rounded-box">
  <legend class="$$fieldset-legend">Page details</legend>
  
  <label class="$$fieldset-label">Title</label>
  <input type="text" class="$$input" placeholder="My awesome page" />
  
  <label class="$$fieldset-label">Slug</label>
  <input type="text" class="$$input" placeholder="my-awesome-page" />
  
  <label class="$$fieldset-label">Author</label>
  <input type="text" class="$$input" placeholder="Name" />
</fieldset>

带有多个连接项的 Fieldset

设置

<fieldset class="$$fieldset w-xs bg-base-200 border border-base-300 p-4 rounded-box">
  <legend class="$$fieldset-legend">Settings</legend>
  <div class="$$join">
    <input type="text" class="$$input $$join-item" placeholder="Product name" />
    <button class="$$btn $$join-item">save</button>
  </div>
</fieldset>

<fieldset class="$$fieldset w-xs bg-base-200 border border-base-300 p-4 rounded-box">
  <legend class="$$fieldset-legend">Settings</legend>
  <div class="$$join">
    <input type="text" class="$$input $$join-item" placeholder="Product name" />
    <button class="$$btn $$join-item">save</button>
  </div>
</fieldset>

            
                <fieldset class="$$fieldset w-xs bg-base-200 border border-base-300 p-4 rounded-box">
  <legend class="$$fieldset-legend">Settings</legend>
  <div class="$$join">
    <input type="text" class="$$input $$join-item" placeholder="Product name" />
    <button class="$$btn $$join-item">save</button>
  </div>
</fieldset>

<fieldset class="$$fieldset w-xs bg-base-200 border border-base-300 p-4 rounded-box">
  <legend class="$$fieldset-legend">Settings</legend>
  <div class="$$join">
    <input type="text" class="$$input $$join-item" placeholder="Product name" />
    <button class="$$btn $$join-item">save</button>
  </div>
</fieldset>

带有 fieldset 的登录表单

登录邮箱密码

<fieldset class="$$fieldset w-xs bg-base-200 border border-base-300 p-4 rounded-box">
  <legend class="$$fieldset-legend">Login</legend>
  
  <label class="$$fieldset-label">Email</label>
  <input type="email" class="$$input" placeholder="Email" />
  
  <label class="$$fieldset-label">Password</label>
  <input type="password" class="$$input" placeholder="Password" />
  
  <button class="$$btn $$btn-neutral mt-4">Login</button>
</fieldset>

<fieldset class="$$fieldset w-xs bg-base-200 border border-base-300 p-4 rounded-box">
  <legend class="$$fieldset-legend">Login</legend>
  
  <label class="$$fieldset-label">Email</label>
  <input type="email" class="$$input" placeholder="Email" />
  
  <label class="$$fieldset-label">Password</label>
  <input type="password" class="$$input" placeholder="Password" />
  
  <button class="$$btn $$btn-neutral mt-4">Login</button>
</fieldset>

            
                <fieldset class="$$fieldset w-xs bg-base-200 border border-base-300 p-4 rounded-box">
  <legend class="$$fieldset-legend">Login</legend>
  
  <label class="$$fieldset-label">Email</label>
  <input type="email" class="$$input" placeholder="Email" />
  
  <label class="$$fieldset-label">Password</label>
  <input type="password" class="$$input" placeholder="Password" />
  
  <button class="$$btn $$btn-neutral mt-4">Login</button>
</fieldset>

<fieldset class="$$fieldset w-xs bg-base-200 border border-base-300 p-4 rounded-box">
  <legend class="$$fieldset-legend">Login</legend>
  
  <label class="$$fieldset-label">Email</label>
  <input type="email" class="$$input" placeholder="Email" />
  
  <label class="$$fieldset-label">Password</label>
  <input type="password" class="$$input" placeholder="Password" />
  
  <button class="$$btn $$btn-neutral mt-4">Login</button>
</fieldset>