# Fieldset

[component-header:sl-fieldset]

Groups input elements by applying styles to them that make them appear as one composite element. Be aware that when elements are in the same row, they need to be of the same hight for styling to match.

```html preview
<sl-fieldset label="Name and address">
  <sl-fieldrow>
        <sl-select searchable clearable placeholder="Customer" data-width="full">
      <sl-menu-item [value]="1">John</sl-menu-item>
    </sl-select>
  </sl-fieldrow>
  <sl-fieldrow>
    <sl-input data-width="3/4" value="Frølunde fed"></sl-input><sl-input data-width="1/4" value="4"></sl-input>
  </sl-fieldrow>
  <sl-fieldrow>
    <sl-input data-width="1/2" value="4220"></sl-input>
    <sl-select data-width="1/2" value="DK">
      <sl-menu-item value="FO">Faroe Islands</sl-menu-item>
      <sl-menu-item value="DK">Denmark</sl-menu-item>
    </sl-select>
  </sl-fieldrow>
  <sl-fieldrow>
    <sl-textarea value="Whats not to like!"></sl-textarea>
  </sl-fieldrow>
</sl-fieldset>
```

### Unified size
The sizes of components will be adjusted to the size set on the fieldset.

```html preview
<sl-fieldset size="small">
  <sl-fieldrow>
    <sl-input data-width="1/2"></sl-input>
    <sl-input data-width="1/2"></sl-input>
  </sl-fieldrow>
  <sl-fieldrow>
    <sl-input data-width="1/4">      
      <sl-popover class="styles-does-not-bleed-too-much" slot="suffix">
        <sl-icon name="fingerprint" slot="trigger"></sl-icon>
        <div class="m-3">
          <sl-input></sl-input>
          <sl-input></sl-input>
        </div>
      </sl-popover>
    </sl-input>
    <div class="a-single-wrapping-element-causes-no-harm" data-width="1/2">
      <sl-input></sl-input>    
    </div>
    <sl-select data-width="1/4">

    </sl-select>
  </sl-fieldrow>
</sl-fieldset>
```

### Specific sizes
Even if size is set by fieldset, it is still possible to force some elements to be of another size.

```html preview
<sl-fieldset size="medium">
  <sl-fieldrow>
    <sl-input size="large" data-width="full"></sl-input>
  </sl-fieldrow>
  <sl-fieldrow>
    <sl-input data-width="3/4"></sl-input>
    <sl-input data-width="1/4"></sl-input>
  </sl-fieldrow>
  <sl-fieldrow>
    <sl-input size="small" data-width="1/4"></sl-input>
    <sl-input size="small" data-width="3/4"></sl-input>   
  </sl-fieldrow>
</sl-fieldset>
```

[component-metadata:sl-fieldset]