Fieldset | Surflane

Preview

Local preview. It doesn't affect real accounts, environments, or run data.

Compare the same example at each size and density. Switching keeps input values and selection state. Size guidance and comparisons

No preview action taken.

Usage

Group inputs on one topic under a Legend. The group's disabled state passes to child Fields.

Don't use it just to draw a visual border. Use a Card instead. Keep an individual label on each input.

Size: SizeProvider size="small" resizes the whole composition, including portals. The default size is Default. Size guidance and comparisons

Anatomy

Fieldset.Root → Legend + related Fields

Keyboard and accessibility

Tab follows the natural order of the inputs. A disabled group is excluded from interaction and form submission. Legend gives the group its accessible name.

Give each control a name that describes its purpose. Connect error messages to their controls, and signal state with more than color. Automated checks don't replace manual keyboard and assistive technology testing.

Example code

Shared components take their styles from design tokens. Each example sets its own composition and accessibility attributes. The calling screen defines callbacks, refs, and product data.

import { Fieldset, Field } from '@surflane/ui'

<Fieldset.Root disabled={disabled}>
  <Fieldset.Legend>Deployment target</Fieldset.Legend>
  <Field.Root name='project'>
    <Field.Label>Project name</Field.Label>
    <Field.Control />
  </Field.Root>
</Fieldset.Root>

Key API

Fieldset — common wrapper props
Prop	Contract	Default
`Root.disabled`	boolean; cascades to nested fields	false
`Legend`	accessible group name	required content

The table lists the common wrapper's main props. See the package type declarations for the full types.