The Fieldset component is a wrapper for input groups, providing better structure and styling control. It helps in grouping related inputs together while maintaining a consistent design.
About
The Fieldset component allows you to manage input styles and behaviors, but at a more granular level. While the Form component ensures uniform styling across all form elements, the Fieldset component lets you separate a section of inputs from others, giving you more control over a specific input group.
This is particularly useful when you want to style or configure a subset of inputs differently from the rest of the form. It supports floating labels, different variants, animations, and more.
Example
The Fieldset component is useful when you need to group related inputs under a common title while maintaining a structured layout. Below are some examples of how you can use it.
<script>
import { Fieldset } from "theui-svelte";
</script>
<Fieldset title="User Information">
<!-- Add your form inputs here -->
</Fieldset>Group Input Settings
A Fieldset passes the variant, size, floatingLabel, rounded, animationSpeed, labelClasses and reset props down to the inputs inside it. When the Fieldset is inside a Form, any of these props you don't set are taken from the Form, so you only override what should differ for this group. Each input can still override the settings with its own props.
<Form>
<Input name="name">Your name</Input>
<Fieldset title="Address Details" variant="flat" size="sm">
<Input name="street">Street</Input>
<Input name="city">City</Input>
</Fieldset>
</Form>In this example, the name input uses the Form's default style, while the address inputs use the flat variant and small size set on the Fieldset.
Accessibility
Use Fieldset to semantically group related inputs like checkboxes or radios. When you set the title prop, it adds a visually hidden legend so screen readers can announce the purpose of the group. The markup stays clean and the group is announced properly.
Configuration
Some of the Fieldset props are not used by the fieldset itself. They are handed down to the inputs inside it, so you can set them once instead of on every field.