Phoenix + DaisyUI

Fieldset

Fieldset with legend and label Open in playground
Page title 
<.fieldset >
  <.fieldset_legend>Page title</.fieldset_legend>
  <.input type="text" placeholder="My awesome page" />
  <.fieldset_label>You can edit page title later on from settings</.fieldset_label>
</.fieldset>
Fieldset with background and color Open in playground
Page title 
<.fieldset class="w-xs bg-base-200 border border-base-300 p-4 rounded-box">
  <.fieldset_legend>Page title</.fieldset_legend>
  <.input type="text" placeholder="My awesome page" />
  <.fieldset_label>You can edit page title later on from settings</.fieldset_label>
</.fieldset>
Fieldset with multiple inputs Open in playground
Page Details 
<.fieldset class="w-xs bg-base-200 border border-base-300 p-4 rounded-box">
  <.fieldset_legend>Page Details</.fieldset_legend>
  <.fieldset_label>Title</.fieldset_label>
  <.input type="text" placeholder="My awesome page" />
  <.fieldset_label>Slug</.fieldset_label>
  <.input type="text" placeholder="my-awesome-page" />
  <.fieldset_label class="fieldset-label">Author</.fieldset_label>
  <.input type="text" placeholder="Name" />
</.fieldset>
Fieldset with multiple join items Open in playground
Settings 
<.fieldset class="w-xs bg-base-200 border border-base-300 p-4 rounded-box">
  <.fieldset_legend>Settings</.fieldset_legend>
  <.join>
    <.input type="text" class="join-item" placeholder="Product Name" />
    <.button class="join-item">Save</.button>
  </.join>
</.fieldset>
Login form with fieldset Open in playground
Login 
<.fieldset class="w-xs bg-base-200 border border-base-300 p-4 rounded-box">
  <.fieldset_legend>Login</.fieldset_legend>
  <.fieldset_label>Email</.fieldset_label>
  <.input type="email" placeholder="Email" />
  <.fieldset_label>Password</.fieldset_label>
  <.input type="password" placeholder="Password" />
  <.button class="btn btn-primary mt-4">Login</.button>
</.fieldset>