Fieldset

Server component, no client JS

ImportCopy Anchor Link

import { Fieldset } from '@nizivo/react/fieldset';

// Once per app (Getting started), after
// @nizivo/tokens/tokens.css and @nizivo/react/css/base.css and @nizivo/react/css/inline-error.css
import '@nizivo/react/css/fieldset.css';

Static or interactiveCopy Anchor Link

Server. It ships no client JavaScript when a Server Component renders it, in every Next.js build mode; its code is bundled only when a client component (a 'use client' file) imports it. disabled is the native attribute, so it disables the controls inside with no script; the controls themselves ship their own code (a Checkbox or a Switch is client kind). How to choose.

In a client app (a Vite or React Router single-page app, or a 'use client' file) it is an ordinary React component: event handlers, refs and state work as usual. In a client app.

ExamplesCopy Anchor Link

import type { JSX } from 'react';
import { Checkbox } from '@nizivo/react/checkbox';
import { Fieldset } from '@nizivo/react/fieldset';

export function FieldsetExample(): JSX.Element {
  return (
    <Fieldset legend="Notify me about" description="Emails go to the store owner.">
      <Checkbox name="notify" value="orders" defaultChecked>
        New orders
      </Checkbox>
      <Checkbox name="notify" value="stock">
        Low stock
      </Checkbox>
    </Fieldset>
  );
}

import type { JSX } from 'react';
import { Checkbox } from '@nizivo/react/checkbox';
import { Fieldset } from '@nizivo/react/fieldset';

export function FieldsetErrorExample(): JSX.Element {
  return (
    <Fieldset legend="Sales channels" required error="Choose at least one channel.">
      <Checkbox name="channel" value="online">
        Online store
      </Checkbox>
      <Checkbox name="channel" value="pos">
        Point of sale
      </Checkbox>
    </Fieldset>
  );
}

import type { JSX } from 'react';
import { Checkbox } from '@nizivo/react/checkbox';
import { Fieldset } from '@nizivo/react/fieldset';

export function FieldsetDisabledExample(): JSX.Element {
  return (
    <Fieldset legend="Wholesale" description="Available on the Plus plan." disabled>
      <Checkbox name="wholesale" value="tiers">
        Tiered prices
      </Checkbox>
      <Checkbox name="wholesale" value="net30">
        Net 30 invoices
      </Checkbox>
    </Fieldset>
  );
}

PropsCopy Anchor Link

Other exportsCopy Anchor Link

FieldsetProps type

import type { FieldsetProps } from '@nizivo/react/fieldset'

The props of Fieldset, listed above.

FieldsetState type

import type { FieldsetState } from '@nizivo/react/fieldset'

The render state of Fieldset, listed above.

Data attributes and slotsCopy Anchor Link

Style parts by class (.nz-<slot>) and state by data attribute. Attribute meanings come from contracts/vocabulary.json.

CSS hooksCopy Anchor Link

Set a hook on the component's class or any ancestor to restyle it without specificity games; leave it unset for the default shown.

Layers: nz.components. Classes: .nz-fieldset, .nz-fieldset-content, .nz-fieldset-description, .nz-fieldset-legend, .nz-fieldset-required.

AccessibilityCopy Anchor Link

Nothing in this component takes focus or keyboard input.

KeyboardCopy Anchor Link

None.

FigmaCopy Anchor Link

Node ids from design/component-map.json, which nz gen writes from component.json. The links open the Nizivo Figma library, which may ask you to sign in.

• Canonical: none
• Ghost masters: none