On this page

FormGroup

FormGroup groups related form fields inside a semantic fieldset with an optional legend, description, spacing, and direction.

import { FormGroup } from "@ninna-ui/forms";

pnpm add @ninna-ui/forms@latest

Includes @ninna-ui/core. CSS setup required.View source

Usage

Import and use FormGroup to semantically group related form fields inside a fieldset.

import { FormGroup, Field, Input } from "@ninna-ui/forms";

<FormGroup legend="Personal Information">
  <Field label="First Name">
    <Input placeholder="John" />
  </Field>
  <Field label="Last Name">
    <Input placeholder="Doe" />
  </Field>
</FormGroup>

<FormGroup
  legend="Contact Details"
  description="Please provide your contact information."
  required
>
  <Field label="Email" required>
    <Input type="email" placeholder="john@example.com" />
  </Field>
</FormGroup>

Basic

FormGroup with a legend and optional description.

Live preview/ Default

Personal Information

First Name

Last Name

Contact Details

Please provide your contact information.

Phone

Website

Direction

Lay out fields vertically (default) or horizontally.

Live preview/ Default

Vertical (default)

First Name

Last Name

Horizontal

First Name

Last Name

Middle

Spacing

Control the gap between fields with sm, md, or lg spacing.

Live preview/ Default

Small Spacing

Field 1

Field 2

Medium Spacing (default)

Field 1

Field 2

Large Spacing

Field 1

Field 2

States

Required and disabled states propagate to all child fields.

Live preview/ Default

Required Group*

Username*

Password*

Disabled Group

Field 1

Field 2

With Checkboxes & Radio

FormGroup works with any form control - checkboxes, radio groups, and more.

Live preview/ Default

Notification Preferences

Choose how you want to be notified.

Email notifications

SMS notifications

Push notifications

Shipping Method

Select your preferred shipping option.

Standard (5–7 days)

Express (2–3 days)

Overnight

API Reference

Complete list of props for the FormGroup component.

Props

Prop	Type	Default	Description
`legend`	`string`	`—`	Legend/title rendered inside the fieldset legend element
`description`	`string`	`—`	Optional description text below the legend; linked via aria-describedby
`disabled`	`boolean`	`false`	Disables all form controls inside the fieldset
`required`	`boolean`	`false`	Marks the group as required (shows * indicator in legend)
`spacing`	`'sm' \| 'md' \| 'lg'`	`'md'`	Gap between child fields
`direction`	`'vertical' \| 'horizontal'`	`'vertical'`	Layout direction of child fields
`id`	`string`	`—`	ID for the fieldset element (auto-generated if not provided)
`className`	`string`	`—`	Additional CSS classes
`children`	`ReactNode`	`—`	Form fields to group together

Accessibility

Renders a native fieldset element for semantic grouping of related controls
The legend prop renders a <legend> element - the primary accessible label for the group
The description prop is linked via aria-describedby for additional context
Setting disabled on the fieldset disables all child controls natively - no JavaScript needed
Setting required shows a visual indicator; pair with required on individual Field components for full a11y
All HTML attributes are forwarded via ...props spread - aria-label, role, etc. are fully overridable