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>Accessibility
Use Fieldset to semantically group related inputs like checkboxes or radios. It includes a visually hidden legend so screen readers can announce the purpose of the group. Clean markup, meaningful structure — accessibility baked in.
Configuration
The Fieldset component includes a set of props that are not directly applied to the Fieldset itself but are inherited by all its child inputs. This allows for a consistent appearance and behavior across all enclosed form inputs, ensuring a cohesive design without the need for individual configuration.