# DescriptionList

Pares de rótulo e valor, na marcação que já existe para isso: `<dl>`.

É a folha de detalhes de toda listagem (CNPJ, emissão, vencimento, valor)
que cada tela montava com um par de `<span>` num flex. Aqui o leitor de tela
ouve "termo, definição" em vez de dois textos soltos, e as linhas saem
divididas pelo mesmo fio.

O valor aceita qualquer nó: `Badge` para situação, `font-mono` para número,
dinheiro do `currencyShort`. O rótulo não encolhe; valor comprido quebra do
lado dele.

Vive bem dentro de `Sheet` e `Dialog` de detalhes, e ao lado de um
`Separator` quando a folha tem mais de um bloco.

## As partes

`DescriptionItem` é uma linha: `label` de um lado, filho do outro. O valor
aceita o que for: `Badge` para situação, `font-mono` para número de nota,
`Clipboard` para o que a pessoa vai levar embora.

## No React Native

Traduz: o `@rivocode/ui-native` exporta `DescriptionList` - as bordas entram por `Children`: a utility de divisória do Tailwind não existe no RN. 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 { DescriptionList } from '@rivocode/ui'
```

## Exemplos

### Folha de detalhes

```tsx
import { Badge, DescriptionItem, DescriptionList } from '@rivocode/ui'
import { currencyShort } from '@rivocode/ui/chart'

export function Default() {
  return (
    <div className="w-full max-w-sm">
      <DescriptionList>
        <DescriptionItem label="CNPJ">
          <span className="font-mono">12.345.678/0001-90</span>
        </DescriptionItem>
        <DescriptionItem label="Emissão">05/08/2026</DescriptionItem>
        <DescriptionItem label="Vencimento">17/09/2026</DescriptionItem>
        <DescriptionItem label="Situação">
          <Badge tone="success" size="sm">
            Paga
          </Badge>
        </DescriptionItem>
        <DescriptionItem label="Valor">
          <span className="font-mono">{currencyShort(2480)}</span>
        </DescriptionItem>
      </DescriptionList>
    </div>
  )
}
```

## Props

Não tem prop própria. Repassa `className`, `style`, `id` e os demais atributos do elemento raiz.

## Ver também

- [Accordion](/componentes/accordion.md)
- [AspectRatio](/componentes/aspect-ratio.md)
- [Avatar](/componentes/avatar.md)
- [Card](/componentes/card.md)
- [Collapsible](/componentes/collapsible.md)
- [DataTable](/componentes/data-table.md)
- [Convenções da biblioteca](/convencoes.md): Provider, tokens e as regras que valem para toda peça
- [Índice completo](/llms.txt)