FieldGroup

A titled set of Form Fields (Figma "Field Group" 185:1467): a `<fieldset>` with its `<legend>`, so screen readers announce the group before each field.

The Figma Content axis (Identity, Contact, Details) is sample content, not a prop.

<FieldGroup title="Contato">
   <FormField label="Celular" required><PhoneInput … /></FormField>
   <FormField label="E-mail"><Input type="email" … /></FormField>
 </FieldGroup>

Playground

Um preset por valor do primeiro eixo do Figma. Mude as props; dsState força hover, foco ou pressionado, como na matriz.

Field Group

Quem você quer protegerUsamos esses dados só para a proteção da Marlene.

Nome

CPF

Data de nascimento

Parentesco

content

Variantes, tamanhos e estados

Cada célula é o componente real, marcada com a variante do Figma que reproduz (passe o mouse pra ver o node).

Content · Identity

Field Group
Quem você quer protegerUsamos esses dados só para a proteção da Marlene. Nome CPF Data de nascimento Parentesco

Content · Contact

Field Group
Contato Celular E-mailopcional

Content · Details

Field Group
Detalhes Parentesco

Props

As props que o arquivo do DS declara. O componente também repassa as do primitivo (base-ui), quando ele tem um.

Prop	Tipo	Padrão	Descrição
title	ReactNode	—	The group name, read as the fieldset legend ("Quem é ela", "Contato").
description?	ReactNode	—	One short line under the title.
children	ReactNode	—	Form Fields. Two per row when the group is at least 448 px wide, one per row below that (a container query, so it follows the group, not the window). Give a field `className="@md:col-span-2"` to take a full row.
className?	string	—