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
<Fieldset.Container> <Fieldset.Content> <Fieldset.Title> {"The Evil Rabbit Jumped over the Fence"} </Fieldset.Title> <Fieldset.Subtitle> {"The Evil Rabbit Jumped over the Fence"} </Fieldset.Subtitle> </Fieldset.Content> <Fieldset.Footer> <Fieldset.FooterStatus> {"The Evil Rabbit Jumped over the Fence"} </Fieldset.FooterStatus> <Fieldset.FooterActions> <Button size={"small"} type={"light"}> {"Submit"} </Button> </Fieldset.FooterActions> </Fieldset.Footer> </Fieldset.Container>
↓Code Editor
↓Code Editor
<Fieldset.Container> <Fieldset.Content> <Fieldset.Title> {"The Evil Rabbit Jumped over the Fence"} </Fieldset.Title> <Fieldset.Subtitle> {"The Evil Rabbit Jumped over the Fence"} </Fieldset.Subtitle> </Fieldset.Content> <Fieldset.Footer> <Fieldset.FooterStatus> {"The Evil Rabbit Jumped over the Fence"} </Fieldset.FooterStatus> <Fieldset.FooterActions> <Button size={"small"} type={"light"}> {"Submit"} </Button> </Fieldset.FooterActions> </Fieldset.Footer> </Fieldset.Container>
Tabs
<Fieldset.Tabs tabs={["One", "Two"]}> <Fieldset.Container> <Fieldset.Content> <Fieldset.Title> {"The Evil Rabbit Jumped over the Fence"} </Fieldset.Title> <Fieldset.Subtitle> {"The Evil Rabbit Jumped over the Fence"} </Fieldset.Subtitle> </Fieldset.Content> <Fieldset.Footer> <Fieldset.FooterStatus> {"The Evil Rabbit Jumped over the Fence"} </Fieldset.FooterStatus> <Fieldset.FooterActions> <Button type={"light"} size={"small"}> {"Action"} </Button> </Fieldset.FooterActions> </Fieldset.Footer> </Fieldset.Container> <Fieldset.Container> <Fieldset.Content> <Fieldset.Title> {"The Fence Jumped over The Evil Rabbit"} </Fieldset.Title> <Fieldset.Subtitle> {"The Fence Jumped over The Evil Rabbit"} </Fieldset.Subtitle> </Fieldset.Content> <Fieldset.Footer> <Fieldset.FooterStatus> {"The Fence Jumped over The Evil Rabbit"} </Fieldset.FooterStatus> <Fieldset.FooterActions> <Button type={"light"} size={"small"}> {"Action"} </Button> </Fieldset.FooterActions> </Fieldset.Footer> </Fieldset.Container> </Fieldset.Tabs>
↓Code Editor
↓Code Editor
<Fieldset.Tabs tabs={["One", "Two"]}> <Fieldset.Container> <Fieldset.Content> <Fieldset.Title> {"The Evil Rabbit Jumped over the Fence"} </Fieldset.Title> <Fieldset.Subtitle> {"The Evil Rabbit Jumped over the Fence"} </Fieldset.Subtitle> </Fieldset.Content> <Fieldset.Footer> <Fieldset.FooterStatus> {"The Evil Rabbit Jumped over the Fence"} </Fieldset.FooterStatus> <Fieldset.FooterActions> <Button type={"light"} size={"small"}> {"Action"} </Button> </Fieldset.FooterActions> </Fieldset.Footer> </Fieldset.Container> <Fieldset.Container> <Fieldset.Content> <Fieldset.Title> {"The Fence Jumped over The Evil Rabbit"} </Fieldset.Title> <Fieldset.Subtitle> {"The Fence Jumped over The Evil Rabbit"} </Fieldset.Subtitle> </Fieldset.Content> <Fieldset.Footer> <Fieldset.FooterStatus> {"The Fence Jumped over The Evil Rabbit"} </Fieldset.FooterStatus> <Fieldset.FooterActions> <Button type={"light"} size={"small"}> {"Action"} </Button> </Fieldset.FooterActions> </Fieldset.Footer> </Fieldset.Container> </Fieldset.Tabs>
Error
<Fieldset.Container> <Fieldset.Content> <Fieldset.Title> {"The Evil Rabbit Jumped over the Fence"} </Fieldset.Title> <Fieldset.Subtitle> {"The Evil Rabbit Jumped over the Fence"} </Fieldset.Subtitle> </Fieldset.Content> <Fieldset.Footer> <Fieldset.FooterStatus accent={"danger"}> {"An error has occurred."} </Fieldset.FooterStatus> <Fieldset.FooterActions> <Button type={"light"} size={"small"} disabled> {"Action"} </Button> </Fieldset.FooterActions> </Fieldset.Footer> </Fieldset.Container>
↓Code Editor
↓Code Editor
<Fieldset.Container> <Fieldset.Content> <Fieldset.Title> {"The Evil Rabbit Jumped over the Fence"} </Fieldset.Title> <Fieldset.Subtitle> {"The Evil Rabbit Jumped over the Fence"} </Fieldset.Subtitle> </Fieldset.Content> <Fieldset.Footer> <Fieldset.FooterStatus accent={"danger"}> {"An error has occurred."} </Fieldset.FooterStatus> <Fieldset.FooterActions> <Button type={"light"} size={"small"} disabled> {"Action"} </Button> </Fieldset.FooterActions> </Fieldset.Footer> </Fieldset.Container>
Disabled
<Fieldset.Container disabled> <Fieldset.Content> <Fieldset.Title color={"darker"}> {"The Evil Rabbit Jumped over the Fence"} </Fieldset.Title> <Fieldset.Subtitle color={"darker"}> {"The Evil Rabbit Jumped over the Fence"} </Fieldset.Subtitle> </Fieldset.Content> <Fieldset.Footer disabled> <Fieldset.FooterStatus color={"darker"}> {"An error has occurred."} </Fieldset.FooterStatus> <Fieldset.FooterActions> <Button type={"light"} size={"small"} disabled> {"Action"} </Button> </Fieldset.FooterActions> </Fieldset.Footer> </Fieldset.Container>
↓Code Editor
↓Code Editor
<Fieldset.Container disabled> <Fieldset.Content> <Fieldset.Title color={"darker"}> {"The Evil Rabbit Jumped over the Fence"} </Fieldset.Title> <Fieldset.Subtitle color={"darker"}> {"The Evil Rabbit Jumped over the Fence"} </Fieldset.Subtitle> </Fieldset.Content> <Fieldset.Footer disabled> <Fieldset.FooterStatus color={"darker"}> {"An error has occurred."} </Fieldset.FooterStatus> <Fieldset.FooterActions> <Button type={"light"} size={"small"} disabled> {"Action"} </Button> </Fieldset.FooterActions> </Fieldset.Footer> </Fieldset.Container>
Disabled Content Only
<Fieldset.Container> <Fieldset.Content disabled> <Fieldset.Title color={"darker"}> {"The Evil Rabbit Jumped over the Fence"} </Fieldset.Title> <Fieldset.Subtitle color={"darker"}> {"The Evil Rabbit Jumped over the Fence"} </Fieldset.Subtitle> </Fieldset.Content> <Fieldset.Footer> <Fieldset.FooterStatus accent={"light"}> {"The Evil Rabbit Jumped over the Fence"} </Fieldset.FooterStatus> <Fieldset.FooterActions> <Button type={"light"} size={"small"}> {"Action"} </Button> </Fieldset.FooterActions> </Fieldset.Footer> </Fieldset.Container>
↓Code Editor
↓Code Editor
<Fieldset.Container> <Fieldset.Content disabled> <Fieldset.Title color={"darker"}> {"The Evil Rabbit Jumped over the Fence"} </Fieldset.Title> <Fieldset.Subtitle color={"darker"}> {"The Evil Rabbit Jumped over the Fence"} </Fieldset.Subtitle> </Fieldset.Content> <Fieldset.Footer> <Fieldset.FooterStatus accent={"light"}> {"The Evil Rabbit Jumped over the Fence"} </Fieldset.FooterStatus> <Fieldset.FooterActions> <Button type={"light"} size={"small"}> {"Action"} </Button> </Fieldset.FooterActions> </Fieldset.Footer> </Fieldset.Container>
Disabled Footer Only
<Fieldset.Container> <Fieldset.Content> <Fieldset.Title> {"The Evil Rabbit Jumped over the Fence"} </Fieldset.Title> <Fieldset.Subtitle> {"The Evil Rabbit Jumped over the Fence"} </Fieldset.Subtitle> </Fieldset.Content> <Fieldset.Footer disabled> <Fieldset.FooterStatus color={"darker"}> {"The Evil Rabbit Jumped over the Fence"} </Fieldset.FooterStatus> <Fieldset.FooterActions> <Button type={"light"} size={"small"} disabled> {"Action"} </Button> </Fieldset.FooterActions> </Fieldset.Footer> </Fieldset.Container>
↓Code Editor
↓Code Editor
<Fieldset.Container> <Fieldset.Content> <Fieldset.Title> {"The Evil Rabbit Jumped over the Fence"} </Fieldset.Title> <Fieldset.Subtitle> {"The Evil Rabbit Jumped over the Fence"} </Fieldset.Subtitle> </Fieldset.Content> <Fieldset.Footer disabled> <Fieldset.FooterStatus color={"darker"}> {"The Evil Rabbit Jumped over the Fence"} </Fieldset.FooterStatus> <Fieldset.FooterActions> <Button type={"light"} size={"small"} disabled> {"Action"} </Button> </Fieldset.FooterActions> </Fieldset.Footer> </Fieldset.Container>
Highlight Footer
<Fieldset.Container> <Fieldset.Content disabled> <Fieldset.Title color={"darker"}> {"The Evil Rabbit Jumped over the Fence"} </Fieldset.Title> <Fieldset.Subtitle color={"darker"}> {"The Evil Rabbit Jumped over the Fence"} </Fieldset.Subtitle> </Fieldset.Content> <Fieldset.Footer highlight> <Fieldset.FooterStatus color={"light"}> {"The Evil Rabbit Jumped over the Fence"} </Fieldset.FooterStatus> <Fieldset.FooterActions> <Button type={"light"} size={"small"}> {"Action"} </Button> </Fieldset.FooterActions> </Fieldset.Footer> </Fieldset.Container>
↓Code Editor
↓Code Editor
<Fieldset.Container> <Fieldset.Content disabled> <Fieldset.Title color={"darker"}> {"The Evil Rabbit Jumped over the Fence"} </Fieldset.Title> <Fieldset.Subtitle color={"darker"}> {"The Evil Rabbit Jumped over the Fence"} </Fieldset.Subtitle> </Fieldset.Content> <Fieldset.Footer highlight> <Fieldset.FooterStatus color={"light"}> {"The Evil Rabbit Jumped over the Fence"} </Fieldset.FooterStatus> <Fieldset.FooterActions> <Button type={"light"} size={"small"}> {"Action"} </Button> </Fieldset.FooterActions> </Fieldset.Footer> </Fieldset.Container>
Danger
<Fieldset.Container type={"danger"}> <Fieldset.Content> <Fieldset.Title> {"The Evil Rabbit Jumped over the Fence"} </Fieldset.Title> <Fieldset.Subtitle> {"The Evil Rabbit Jumped over the Fence"} </Fieldset.Subtitle> </Fieldset.Content> <Fieldset.Footer> <Fieldset.FooterStatus accent={"light"}> {"The Evil Rabbit Jumped over the Fence"} </Fieldset.FooterStatus> <Fieldset.FooterActions> <Button type={"danger"} size={"small"}> {"Action"} </Button> </Fieldset.FooterActions> </Fieldset.Footer> </Fieldset.Container>
↓Code Editor
↓Code Editor
<Fieldset.Container type={"danger"}> <Fieldset.Content> <Fieldset.Title> {"The Evil Rabbit Jumped over the Fence"} </Fieldset.Title> <Fieldset.Subtitle> {"The Evil Rabbit Jumped over the Fence"} </Fieldset.Subtitle> </Fieldset.Content> <Fieldset.Footer> <Fieldset.FooterStatus accent={"light"}> {"The Evil Rabbit Jumped over the Fence"} </Fieldset.FooterStatus> <Fieldset.FooterActions> <Button type={"danger"} size={"small"}> {"Action"} </Button> </Fieldset.FooterActions> </Fieldset.Footer> </Fieldset.Container>
Warning
<Fieldset.Container type={"warning"}> <Fieldset.Content> <Fieldset.Title> {"The Evil Rabbit Jumped over the Fence"} </Fieldset.Title> <Fieldset.Subtitle> {"The Evil Rabbit Jumped over the Fence"} </Fieldset.Subtitle> </Fieldset.Content> <Fieldset.Footer> <Fieldset.FooterStatus accent={"light"}> {"The Evil Rabbit Jumped over the Fence"} </Fieldset.FooterStatus> <Fieldset.FooterActions> <Button type={"warning"} size={"small"}> {"Action"} </Button> </Fieldset.FooterActions> </Fieldset.Footer> </Fieldset.Container>
↓Code Editor
↓Code Editor
<Fieldset.Container type={"warning"}> <Fieldset.Content> <Fieldset.Title> {"The Evil Rabbit Jumped over the Fence"} </Fieldset.Title> <Fieldset.Subtitle> {"The Evil Rabbit Jumped over the Fence"} </Fieldset.Subtitle> </Fieldset.Content> <Fieldset.Footer> <Fieldset.FooterStatus accent={"light"}> {"The Evil Rabbit Jumped over the Fence"} </Fieldset.FooterStatus> <Fieldset.FooterActions> <Button type={"warning"} size={"small"}> {"Action"} </Button> </Fieldset.FooterActions> </Fieldset.Footer> </Fieldset.Container>
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.