# Fieldset 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. ```html

``` ## 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. ```html

Your name

Street City

``` 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. ### Props | Name | Type | Default | Description | | --- | --- | --- | --- | | `title` | string | `undefined` | Legend or title of the fieldset for the assertive technology. Only visible to the screen readers. No legend is rendered when it is not set. | | `variant` | [INPUT_VARIANT](https://www.theui.dev/docs/types#input-variant-type) | `Inherited from Form or "bordered` | Defines the visual style of the inputs. | | `size` | [INPUT_SIZE](https://www.theui.dev/docs/types#input-size-type) | `Inherited from Form or "md` | Defines the size of the inputs: "sm", "md", "lg" or "xl". | | `floatingLabel` | boolean | `true if the Fieldset sets its own "flat" variant; otherwise inherited from Form, or true if variant is "flat` | Enables or disables floating labels for inputs. If variant is set to "flat", this defaults to true and false otherwise. | | `animationSpeed` | [ANIMATE_SPEED](https://www.theui.dev/docs/types#animation-speed-type) | `Inherited from Form or "normal` | Controls the animation speed for inputs. | | `rounded` | [ROUNDED](https://www.theui.dev/docs/types#rounded-type) | `Inherited from Form or "md` | Controls the border radius of inputs. | | `labelClasses` | string | `Inherited from Form or "` | Allows custom CSS classes to be applied to input labels for additional styling. | | `reset` | boolean | `Inherited from Form or false` | Resets all the defaults styles and apply only the custom styles. | --- Category: Components Keywords: fieldset, form-group, inputs, structure, component, svelte, svelte-5, theui-svelte, component-library, ui, tailwindcss Full documentation set: https://www.theui.dev/llms-full.txt