Fieldset

Fieldset is used to group related form elements together.

The Fieldset component groups form fields together with a shared legend and helper/error text.

1
import { Fieldset, FieldsetParts } from '@cerberus/react'

Form Section Example

The Fieldset component can be used to group related form elements together using the usage prop which can be either formSection or fieldGroup (default).

Update your profileYou can update your profile information here.

What is your first name?

What is your display name?

This is an error message for the fieldset group.

Field Group Example

When use need to label a group of Radio or Checkbox inputs, use the usage prop with the value fieldGroup.

Who is your favorite?

CerberusHadesZeus

Primitives

You can utilize the primitive components to customize the Fieldset.

Component	Description
FieldsetRoot	The context provider for the Fieldset parts
FieldsetLegend	The label of the fieldset
FieldsetHelperText	The label description for the Fieldset
FieldsetErrorText	The error message for the Fieldset

Custom LegendThis is some custom Helper Text

This is a custom example

This is a custom Error Text

API

Props

The Fieldset component is an abstraction of the primitives and accepts the following props:

Name	Default	Description
usage	`fieldGroup`	The type of fieldset to display.

The Fieldset component also accepts all the props of the FieldsetRoot primitive props

Parts

The FieldsetParts API is an Object containing the full family of components.

Name	Description
Root	The `FieldsetRoot` component which is the Provider for the family.
Legend	The `FieldsetLegend` component which displays the label.
HelperText	The `FieldsetHelperText` component which displays the description text.
ErrorText	The `FieldsetErrorText` component which displays the error text when the group is marked `invalid`.

The Fieldset component groups form fields together with a shared legend and helper/error text.

1
import { Fieldset, FieldsetParts } from '@cerberus/react'

Form Section Example

The Fieldset component can be used to group related form elements together using the usage prop which can be either formSection or fieldGroup (default).

Update your profileYou can update your profile information here.

What is your first name?

What is your display name?

This is an error message for the fieldset group.

Field Group Example

When use need to label a group of Radio or Checkbox inputs, use the usage prop with the value fieldGroup.

Who is your favorite?

CerberusHadesZeus

Primitives

You can utilize the primitive components to customize the Fieldset.

Component	Description
FieldsetRoot	The context provider for the Fieldset parts
FieldsetLegend	The label of the fieldset
FieldsetHelperText	The label description for the Fieldset
FieldsetErrorText	The error message for the Fieldset

Custom LegendThis is some custom Helper Text

This is a custom example

This is a custom Error Text

API

Props

The Fieldset component is an abstraction of the primitives and accepts the following props:

Name	Default	Description
usage	`fieldGroup`	The type of fieldset to display.

The Fieldset component also accepts all the props of the FieldsetRoot primitive props

Parts

The FieldsetParts API is an Object containing the full family of components.

Name	Description
Root	The `FieldsetRoot` component which is the Provider for the family.
Legend	The `FieldsetLegend` component which displays the label.
HelperText	The `FieldsetHelperText` component which displays the description text.
ErrorText	The `FieldsetErrorText` component which displays the error text when the group is marked `invalid`.

The Fieldset component groups form fields together with a shared legend and helper/error text.

1
import { Fieldset, FieldsetParts } from '@cerberus/react'

Form Section Example

The Fieldset component can be used to group related form elements together using the usage prop which can be either formSection or fieldGroup (default).

Update your profileYou can update your profile information here.

What is your first name?

What is your display name?

This is an error message for the fieldset group.

Field Group Example

When use need to label a group of Radio or Checkbox inputs, use the usage prop with the value fieldGroup.

Who is your favorite?

CerberusHadesZeus

Primitives

You can utilize the primitive components to customize the Fieldset.

Component	Description
FieldsetRoot	The context provider for the Fieldset parts
FieldsetLegend	The label of the fieldset
FieldsetHelperText	The label description for the Fieldset
FieldsetErrorText	The error message for the Fieldset

Custom LegendThis is some custom Helper Text

This is a custom example

This is a custom Error Text

API

Props

The Fieldset component is an abstraction of the primitives and accepts the following props:

Name	Default	Description
usage	`fieldGroup`	The type of fieldset to display.

The Fieldset component also accepts all the props of the FieldsetRoot primitive props

Parts

The FieldsetParts API is an Object containing the full family of components.

Name	Description
Root	The `FieldsetRoot` component which is the Provider for the family.
Legend	The `FieldsetLegend` component which displays the label.
HelperText	The `FieldsetHelperText` component which displays the description text.
ErrorText	The `FieldsetErrorText` component which displays the error text when the group is marked `invalid`.

The Fieldset component groups form fields together with a shared legend and helper/error text.

1
import { Fieldset, FieldsetParts } from '@cerberus/react'

Form Section Example

The Fieldset component can be used to group related form elements together using the usage prop which can be either formSection or fieldGroup (default).

Update your profileYou can update your profile information here.

What is your first name?

What is your display name?

This is an error message for the fieldset group.

Field Group Example

When use need to label a group of Radio or Checkbox inputs, use the usage prop with the value fieldGroup.

Who is your favorite?

CerberusHadesZeus

Primitives

You can utilize the primitive components to customize the Fieldset.

Component	Description
FieldsetRoot	The context provider for the Fieldset parts
FieldsetLegend	The label of the fieldset
FieldsetHelperText	The label description for the Fieldset
FieldsetErrorText	The error message for the Fieldset

Custom LegendThis is some custom Helper Text

This is a custom example

This is a custom Error Text

API

Props

The Fieldset component is an abstraction of the primitives and accepts the following props:

Name	Default	Description
usage	`fieldGroup`	The type of fieldset to display.

The Fieldset component also accepts all the props of the FieldsetRoot primitive props

Parts

The FieldsetParts API is an Object containing the full family of components.

Name	Description
Root	The `FieldsetRoot` component which is the Provider for the family.
Legend	The `FieldsetLegend` component which displays the label.
HelperText	The `FieldsetHelperText` component which displays the description text.
ErrorText	The `FieldsetErrorText` component which displays the error text when the group is marked `invalid`.