# 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. |
← Yes No Fieldset Group →