Fieldset

Fieldset groups related controls under one semantic boundary.

Storybook Source

Overview

Fieldset styling is mostly driven by global theme tokens rather than a large component-local CSS-variable contract.

Public CSS Variables

There are no dedicated public --fieldset-* variables in the current implementation.

The component primarily consumes shared system tokens:

Notify me by

Push notifications

Variable	Value	Affects
outlined group border`Fieldset`		No visible change in this state
muted supporting legend text`Fieldset` descendant `.sublegend`		No visible change in this state
base border radius`Fieldset`		No visible change in this state
outlined appearance radius`Fieldset[data-appearance='outlined']`		No visible change in this state
vertical spacing between grouped elementsroot and header		No visible change in this state
responsive inner paddingoutlined appearance	—	No visible change in this state

Edit a value to try it in the demo. Hover a variable to outline what it changes; switch the preview state to see hover, pressed, focus, disabled and invalid variables. Click a name to copy it.

Part-Level Variables

Root

Fieldset uses border, radius, and spacing tokens to establish the group container.

FieldsetHeader is a flex column with bottom spacing before grouped controls.

Legend

FieldsetLegend keeps native legend behavior and only removes default padding.

State And Variant Interaction

outlined adds border, radius, and responsive padding.
transparent removes border and padding but keeps semantic grouping.
Disabled styling mostly comes from descendant controls, not from root-specific fieldset tokens.

Examples

Use theme tokens to tighten spacing

A dense filter panel overrides gap and padding with spacing tokens and pairs them with a smaller legend and size='sm' checkboxes.

LTRRTL

use-theme-tokens-to-tighten-spacing.tsx · 27 lines

import {
  Checkbox,
  CheckboxCheckedIcon,
  CheckboxIndicator,
  CheckboxInput,
  Fieldset,
  FieldsetLegend,
} from '@vega-ui/react';

const COLUMNS = ['Status', 'Owner', 'Due date', 'Priority', 'Last updated'];

export default function UseThemeTokensToTightenSpacing() {

Match surrounding panel radius

Inside a rounded panel, give the fieldset a smaller radius than the panel, so the corners stay concentric.

LTRRTL

match-surrounding-panel-radius.tsx · 20 lines

import { Fieldset, FieldsetLegend, Label, TextField, TextFieldInput } from '@vega-ui/react';
import { useId } from 'react';

export default function MatchSurroundingPanelRadius() {
  const id = useId();

  return (
    <div style={{ padding: 'var(--spacing-8)', borderRadius: 'var(--radius-6)', background: 'var(--fills-quaternary)', width: '100%' }}>
      <Fieldset appearance='outlined' style={{ borderRadius: 'var(--radius-4)' }}>
        <FieldsetLegend>Billing contact</FieldsetLegend>
        <div style={{ display: 'grid', gap: 'var(--spacing-3)' }}>
          <Label htmlFor={id}>Invoice email</Label>

Do Not Override

removing legend semantics with display: contents
relying on transparent when a visible boundary is required for comprehension
styling the root as a generic card instead of a semantic form group