Fieldset
The Fieldset component is a container that groups related elements, such as form fields or content sections, within a distinct visual boundary. It supports a range of features, including tabs for organizing content, footer actions, and customizable styles based on accent colors.
Usage
First of all, you need to import the Fieldset component from the kitchn package.
import { Fieldset } from "kitchn"Default
Tabs
Error
Disabled
Disabled Content Only
Disabled Footer Only
Highlight Footer
Danger
Warning
Props
Fieldset Container Props
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
tabs | boolean | false | No | Indicates if the fieldset is part of a tabbed layout. |
disabled | boolean | false | No | Disables all interactive elements within the fieldset. |
highlight | boolean | false | No | Highlights the fieldset, typically when a user hovers over or focuses on it. |
type | keyof AccentColors | undefined | No | Applies an accent color to the fieldset's border and footer elements. |
Fieldset Footer Props
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
disabled | boolean | false | No | Disables interactions with the footer, such as clicking actions. |
highlight | boolean | false | No | Highlights the footer, typically for user interactions. |
Fieldset Tabs Props
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
tabs | string[] | undefined | Yes | An array of tab titles that will be used in the tab menu. |
Fieldset Content Props
All props from ContainerProps are supported.
Fieldset Title and Subtitle Props
All props from TextProps are supported.