# Fieldset

Agrupa campos que respondem a mesma pergunta: endereco, dados do cliente,
pagamento.

A legenda não é só título: o leitor de tela anuncia ela junto com o rótulo de
cada campo dentro. "Número" sozinho não diz nada; "Endereco, número" diz.

```tsx
<Fieldset>
  <FieldsetLegend>Endereco</FieldsetLegend>

  <Field>
    <FieldLabel>Rua</FieldLabel>
    <Input placeholder="Av. Epitacio Pessoa" />
  </Field>

  <Field>
    <FieldLabel>Numero</FieldLabel>
    <Input placeholder="1200" />
  </Field>
</Fieldset>
```

O respiro entre grupos e maior que o respiro entre campos, de propósito: e ele
que mostra onde um assunto termina.

## No React Native

Traduz: o `@rivocode/ui-native` exporta `Fieldset` - `legend` como prop. A API não é a mesma do web (no nativo tudo é controlado), e a [tabela de paridade](/react-native) diz o que muda peça a peça.

## Importação

```tsx
import { Fieldset } from '@rivocode/ui'
```

## Exemplos

### Endereço

```tsx
import { Field, FieldLabel, Fieldset, FieldsetLegend, Input } from '@rivocode/ui'

export function Address() {
  return (
    <Fieldset className="w-80">
      <FieldsetLegend>Endereço</FieldsetLegend>
      <Field>
        <FieldLabel>Rua</FieldLabel>
        <Input defaultValue="Av. Epitacio Pessoa" />
      </Field>
      <Field>
        <FieldLabel>Número</FieldLabel>
        <Input defaultValue="1200" />
      </Field>
    </Fieldset>
  )
}
```

## Props

| Prop | Tipo | Obrigatória | Desde | O que faz |
| --- | --- | --- | --- | --- |
| `render` | `ComponentRenderFn<HTMLProps, FieldsetRootState> \| ReactElement<unknown, string \| JSXElementConstructor<any>>` |  | 0.4.0 | Allows you to replace the component's HTML element with a different tag, or compose it with another component. |

Além dessas: repassa `className`, `style`, `id` e os demais atributos do elemento raiz.

## Ver também

- [Autocomplete](/componentes/autocomplete.md)
- [Calendar](/componentes/calendar.md)
- [Checkbox](/componentes/checkbox.md)
- [CheckboxGroup](/componentes/checkbox-group.md)
- [ColorPicker](/componentes/color-picker.md)
- [Combobox](/componentes/combobox.md)
- [Convenções da biblioteca](/convencoes.md): Provider, tokens e as regras que valem para toda peça
- [Índice completo](/llms.txt)