Documentation
Fieldset

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

NameTypeDefaultRequiredDescription
tabsbooleanfalseNoIndicates if the fieldset is part of a tabbed layout.
disabledbooleanfalseNoDisables all interactive elements within the fieldset.
highlightbooleanfalseNoHighlights the fieldset, typically when a user hovers over or focuses on it.
typekeyof AccentColorsundefinedNoApplies an accent color to the fieldset's border and footer elements.

Fieldset Footer Props

NameTypeDefaultRequiredDescription
disabledbooleanfalseNoDisables interactions with the footer, such as clicking actions.
highlightbooleanfalseNoHighlights the footer, typically for user interactions.

Fieldset Tabs Props

NameTypeDefaultRequiredDescription
tabsstring[]undefinedYesAn 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.