Fieldset

Groups separately labeled fields under a native legend with normal vertical layout and disabled cascading to both native and silver-ui controls. `className`, `style`, and `hidden` apply to the outer wrapper so they cover the fieldset and its detached status summary together; the remaining native props, `data-testid`, and `ref` target the fieldset element.

Examples

Default

Profile details

Full name

Email address

Organization

function ProfileFields(): React.JSX.Element {
  const [name, setName] = useState('Ada Lovelace');
  const [email, setEmail] = useState('ada@example.com');
  const [organization, setOrganization] = useState('Analytical Engines');

  return (
    <>
      <TextInput label="Full name" onChange={setName} value={name} />
      <TextInput
        label="Email address"
        onChange={setEmail}
        type="email"
        value={email}
      />
      <TextInput
        label="Organization"
        onChange={setOrganization}
        value={organization}
      />
    </>
  );
}

<Fieldset {...args}>
  <ProfileFields />
</Fieldset>

With Description

Profile details

This information appears on your public profile.

Full name

Email address

Organization

function ProfileFields(): React.JSX.Element {
  const [name, setName] = useState('Ada Lovelace');
  const [email, setEmail] = useState('ada@example.com');
  const [organization, setOrganization] = useState('Analytical Engines');

  return (
    <>
      <TextInput label="Full name" onChange={setName} value={name} />
      <TextInput
        label="Email address"
        onChange={setEmail}
        type="email"
        value={email}
      />
      <TextInput
        label="Organization"
        onChange={setOrganization}
        value={organization}
      />
    </>
  );
}

<Fieldset {...args}>
  <ProfileFields />
</Fieldset>

Required And Optional

Billing detailsRequired

Full name

Email address

Organization

Secondary contactOptional

Full name

Email address

Organization

function ProfileFields(): React.JSX.Element {
  const [name, setName] = useState('Ada Lovelace');
  const [email, setEmail] = useState('ada@example.com');
  const [organization, setOrganization] = useState('Analytical Engines');

  return (
    <>
      <TextInput label="Full name" onChange={setName} value={name} />
      <TextInput
        label="Email address"
        onChange={setEmail}
        type="email"
        value={email}
      />
      <TextInput
        label="Organization"
        onChange={setOrganization}
        value={organization}
      />
    </>
  );
}

<VStack gap={8}>
  <Fieldset isRequired legend="Billing details">
    <ProfileFields />
  </Fieldset>
  <Fieldset isOptional legend="Secondary contact">
    <ProfileFields />
  </Fieldset>
</VStack>

Error Summary

Profile details

Full name

Email address

Organization

Enter an email address before saving this section.

function ProfileFields(): React.JSX.Element {
  const [name, setName] = useState('Ada Lovelace');
  const [email, setEmail] = useState('ada@example.com');
  const [organization, setOrganization] = useState('Analytical Engines');

  return (
    <>
      <TextInput label="Full name" onChange={setName} value={name} />
      <TextInput
        label="Email address"
        onChange={setEmail}
        type="email"
        value={email}
      />
      <TextInput
        label="Organization"
        onChange={setOrganization}
        value={organization}
      />
    </>
  );
}

<Fieldset {...args}>
  <ProfileFields />
</Fieldset>

Disabled

Profile details

Full name

Email address

Organization

Notification channels

function ProfileFields(): React.JSX.Element {
  const [name, setName] = useState('Ada Lovelace');
  const [email, setEmail] = useState('ada@example.com');
  const [organization, setOrganization] = useState('Analytical Engines');

  return (
    <>
      <TextInput label="Full name" onChange={setName} value={name} />
      <TextInput
        label="Email address"
        onChange={setEmail}
        type="email"
        value={email}
      />
      <TextInput
        label="Organization"
        onChange={setOrganization}
        value={organization}
      />
    </>
  );
}

<Fieldset {...args}>
  <ProfileFields />
  <MultiSelect
    label="Notification channels"
    onChange={() => {}}
    options={['Email', 'SMS', 'Push']}
    value={['Email']}
  />
</Fieldset>

Read Only

Profile details

Full name

Email address

Organization

Notification channels

function ProfileFields(): React.JSX.Element {
  const [name, setName] = useState('Ada Lovelace');
  const [email, setEmail] = useState('ada@example.com');
  const [organization, setOrganization] = useState('Analytical Engines');

  return (
    <>
      <TextInput label="Full name" onChange={setName} value={name} />
      <TextInput
        label="Email address"
        onChange={setEmail}
        type="email"
        value={email}
      />
      <TextInput
        label="Organization"
        onChange={setOrganization}
        value={organization}
      />
    </>
  );
}

<Fieldset {...args}>
  <ProfileFields />
  <MultiSelect
    label="Notification channels"
    onChange={() => {}}
    options={['Email', 'SMS', 'Push']}
    value={['Email']}
  />
</Fieldset>

API

Fieldset

When isOptional: false, isRequired: false

Prop	Type	Default	Description
`isOptional`	`false`	—
`isRequired`	`false`	—
`children`*	`ReactNode`	—	Separately labeled fields grouped by the fieldset.
`data-testid`	`string`	—	Test ID applied to the native fieldset element.
`description`	`ReactNode`	—	Supporting text rendered below the legend.
`isDisabled`	`boolean`	`false`	Whether form controls in the fieldset are disabled. Native controls are disabled through the fieldset element; silver-ui inputs also receive the state through context.
`isReadOnly`	`boolean`	`false`	Whether silver-ui form controls in the fieldset are read-only.
`legend`*	`string`	—	Text used by the native legend to name the fieldset.
`ref`	`Ref<HTMLFieldSetElement>`	—	Ref forwarded to the native fieldset element.
`status`	`InputStatus`	—	Validation summary displayed below the fieldset. The status is not propagated to child controls.

When isOptional: true, isRequired: false

Prop	Type	Default	Description
`isOptional`*	`true`	—
`isRequired`	`false`	—
`children`*	`ReactNode`	—	Separately labeled fields grouped by the fieldset.
`data-testid`	`string`	—	Test ID applied to the native fieldset element.
`description`	`ReactNode`	—	Supporting text rendered below the legend.
`isDisabled`	`boolean`	`false`	Whether form controls in the fieldset are disabled. Native controls are disabled through the fieldset element; silver-ui inputs also receive the state through context.
`isReadOnly`	`boolean`	`false`	Whether silver-ui form controls in the fieldset are read-only.
`legend`*	`string`	—	Text used by the native legend to name the fieldset.
`ref`	`Ref<HTMLFieldSetElement>`	—	Ref forwarded to the native fieldset element.
`status`	`InputStatus`	—	Validation summary displayed below the fieldset. The status is not propagated to child controls.

When isOptional: false, isRequired: true

Prop	Type	Default	Description
`isOptional`	`false`	—
`isRequired`*	`true`	—
`children`*	`ReactNode`	—	Separately labeled fields grouped by the fieldset.
`data-testid`	`string`	—	Test ID applied to the native fieldset element.
`description`	`ReactNode`	—	Supporting text rendered below the legend.
`isDisabled`	`boolean`	`false`	Whether form controls in the fieldset are disabled. Native controls are disabled through the fieldset element; silver-ui inputs also receive the state through context.
`isReadOnly`	`boolean`	`false`	Whether silver-ui form controls in the fieldset are read-only.
`legend`*	`string`	—	Text used by the native legend to name the fieldset.
`ref`	`Ref<HTMLFieldSetElement>`	—	Ref forwarded to the native fieldset element.
`status`	`InputStatus`	—	Validation summary displayed below the fieldset. The status is not propagated to child controls.