Fieldset
Groups related form controls or fields and extends the Field component.
The Fieldset component is used to follow the W3C Grouping Controls recommendation for associating related form controls. It renders a <fieldset> element and should always be used in conjunction with the Legend component to provide a title for the group.
This component automatically includes the Field component, so you don't need to worry about wrapping it yourself, just be sure to pass the form and name props to the Fieldset as you would with the Field component.
When to use a fieldset
Radio Groups
When you have a group of radio buttons related to a single field, you should use a Fieldset to group them together.
<Fieldset {form} name="theme">
<Legend>Select your theme</Legend>
{#each themes as theme}
<Control>
{#snippet children({ props })}
<input {...props} type="radio" bind:group={$formData.theme} value={theme} />
<Label>{theme}</Label>
{/snippet}
</Control>
{/each}
<Description>Help us understand your preferences by selecting a theme.</Description>
<FieldErrors />
</Fieldset>
Checkbox Groups
When you have a group of checkboxes related to a single field, typically used for multiple selections, you should use a Fieldset to group them together.
<Fieldset {form} name="allergies">
<Legend>Any food allergies?</Legend>
{#each allergies as allergy}
<Control>
{#snippet children({ props })}
<input
{...props}
type="checkbox"
bind:group={$formData.allergies}
value={allergy}
/>
<Label>{allergy}</Label>
{/snippet}
</Control>
{/each}
<Description>We'll make sure to accommodate your dietary needs.</Description>
<FieldErrors />
</Fieldset>
Grouped Form Sections
When you have a large form with multiple sections containing related fields, such as a "Billing Address" and a "Shipping Address", you should use a <fieldset> to group the related fields together. You won't use the Fieldset component directly in this case, since it doesn't represent a field on the form.
<form>
<fieldset>
<legend>Billing Address</legend>
<!-- ... billing address fields -->
</fieldset>
<fieldset>
<legend>Shipping Address</legend>
<!-- ... shipping address fields -->
</fieldset>
</form>
API Reference
Props
The Fieldset component renders a <fieldset> element and accepts the following props:
The form object returned from calling superForm in your component.
The path to the field in the form object.
A $bindable reference to the underlying HTML element rendered by the Fieldset component.
If provided, the Fieldset component will not render an HTML element and will instead expect you to spread the snippet's props onto an element of your choosing.
See the child snippet documentation for more information.
Any additional props provided to the Fieldset component will be spread onto the underlying HTML element.
Snippet Props (children)
The following snippet props are provided to the children snippet for convenience and ease of composition when using the ElementField component.
The value of the value store of the field.
The value of the errors store for the field.
The constraints for the field.
Whether the field is tainted or not.
Snippet Props (child)
The following snippet props are provided to the child snippet for convenience and ease of composition when using the ElementField component.
The props to spread onto your custom <fieldset> element/component.
The value of the value store of the field.
The value of the errors store for the field.
The constraints for the field.
Whether the field is tainted or not.
Data Attributes
The following data attributes are automatically applied to the <fieldset> element rendered by the Fieldset component.
Applied to the element for selection during styling or otherwise.
Applied to the element when a validation error exists on the field.