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.

Error Footer