Inputs@knitui/components

Fieldset

Fieldset groups related form controls under an optional legend. variant controls the chrome style (default border, filled tinted background, unstyled no border/padding). disabled dims the group and blocks pointer interaction with every control inside.

WebiOSAndroid2 style slots1 own props11 examples

Stories Source Tests Open in Storybook

import { Fieldset } from "@knitui/components";

Playground

Loading playground…

variantVisual style — how the fieldset border and background are rendered.

disabledDims the fieldset and blocks interaction with the controls inside it.

false

legendLabel rendered as the fieldset legend.

radiusBorder radius applied to the fieldset frame.

shadowElevation — drop shadow from the shared ladder.

themeAccent theme used by tinted surfaces.

Playground

<Fieldset
  legend="Personal details"
  variant="default"
  disabled={false}
>
  <Text>Form controls go here</Text>
</Fieldset>

Examples

Variants

Every visual variant side by side, each with a legend and placeholder content.

Loading example…

VariantsSource Storybook

Shadows

Each elevation level from the shared shadow ladder.

Loading example…

ShadowsSource Storybook

With Legend

Fieldset with a legend label identifying the group of controls.

Loading example…

With LegendSource Storybook

Without Legend

Fieldset with no legend — the border and padding remain, but no label is shown.

Loading example…

Without LegendSource Storybook

Disabled

Disabled state — all controls inside are dimmed and not interactive.

Loading example…

DisabledSource Storybook

Filled

The filled variant uses a subtle background tint to distinguish the group.

Loading example…

FilledSource Storybook

Theme

Theme changes the tint used by the filled variant.

Loading example…

ThemeSource Storybook

Unstyled

The unstyled variant strips all chrome — no border, no padding, no radius.

Loading example…

UnstyledSource Storybook

Nested

Nested fieldsets — group sub-sections of a larger form.

Loading example…

NestedSource Storybook

Styles

Per-slot styles targets individual parts — here the root and legend.

Loading example…

StylesSource Storybook

Props

Prop	Type	Default	Description
`disabled` system	`boolean \| undefined`	`false`	Dims the fieldset and blocks interaction with the controls inside it.
`legend`	`ReactNode`	`Personal details`	Label rendered as the fieldset legend.
`radius` system	`string \| number \| undefined` unset · xxs · xs · sm · md · lg · xl · xxl	—	Border radius applied to the fieldset frame.
`shadow` system	`"xs" \| "sm" \| "md" \| "lg" \| "xl" \| "xxs" \| "xxl" \| undefined` unset · xs · sm · md · lg · xl	—	Elevation — drop shadow from the shared ladder.
`styles` system	`SlotStyles<FieldsetStyles> \| undefined`	—	Per-slot style sugar — props spread onto the matching styled part.
`theme` system	`ThemeName \| null \| undefined` unset · blue · red · green · yellow · pink · gray	—	Accent theme used by tinted surfaces.
`variant` system	`"unstyled" \| "default" \| "filled" \| undefined` default · filled · unstyled	`default`	Visual style — how the fieldset border and background are rendered.

Style slots

Every part of Fieldset can be styled through the styles prop. Explicit props on the component always win over slot styles.

Slot	Usage
`legend`	`styles={{ legend: { … } }}`
`root`	`styles={{ root: { … } }}`

Accessibility & DOM props (2)

Prop	Type
`key`	`Key \| null \| undefined`
`ref`	`Ref<TamaguiElement> \| undefined`

Plus 499 inherited style props from Box — the full Tamagui/React Native style surface, including token shorthands like p, mx, bg and c. See Tokens for the scales they accept, or the full list.