# Fieldset

This page contains all possible variations of the VUE fieldset component.

A fieldset lets users group form controls, legends and labels within a form. It also provides an error message and state for when user input is invalid.

NOTE

The fieldset makes use of slots. This makes it possible to nest content inside the component.

# With legend

The fieldset legend is defined by passing a String to the legend prop.

<div class="goco-l-grid-container">
  <GocoFieldset legend="Legend text">
    <GocoInput placeholder="Placeholder text" />
  </GocoFieldset>
</div>

# With error

The error state is defined by passing a String to the errorMessage prop. This causes the component to appear in an error state, and displays the passed String as an error message.

<div class="goco-l-grid-container">
  <GocoFieldset legend="Legend text" error-message="Please enter a valid value">
    <GocoInput placeholder="Placeholder text" />
  </GocoFieldset>
</div>

# Component props

Prop Type Default Description
legend String Adds a legend to the fieldset.
errorMessage String Adds an error message and error state to the fieldset.