# SettingsSection

> Una sección de una pantalla de Configuración: una `Card` con título y descripción en la cabecera y los campos a lo ancho, en una `SettingsGrid` de 1 columna y 2 desde 48 rem de ancho de la grilla (container query: un panel lateral abierto la deja en 1, como un teléfono).

```tsx
import { SettingsGrid, SettingsSection } from "sebs7n-ui/settings-section"
```

Sin `"use client"`: sirve en un Server Component.

## Ejemplos

### Secciones en dos columnas

Una columna en el teléfono y dos desde `lg`; las cards de una fila comparten el alto de cabecera y de cuerpo. `wide` ocupa las dos.

```tsx
import { Field, FieldDescription, FieldLabel } from "sebs7n-ui/field"
import { Input } from "sebs7n-ui/input"
import { SettingsGrid, SettingsSection } from "sebs7n-ui/settings-section"
import { Switch } from "sebs7n-ui/switch"

function Basic() {
  return (
    <SettingsGrid className="w-full">
      <SettingsSection description="Cómo se llama y cómo se ve." title="Perfil">
        <Field name="name">
          <FieldLabel>Nombre</FieldLabel>
          <Input defaultValue="Equipo de ejemplo" />
        </Field>
        <Field name="site">
          <FieldLabel>Sitio</FieldLabel>
          <Input defaultValue="ejemplo.com" />
          <FieldDescription>Se muestra en el pie de los documentos.</FieldDescription>
        </Field>
      </SettingsSection>
      <SettingsSection description="Qué avisos llegan y por dónde." title="Avisos">
        <div className="flex items-center justify-between gap-4">
          <span className="text-callout text-label">Por correo</span>
          <Switch aria-label="Avisos por correo" defaultChecked />
        </div>
        <div className="flex items-center justify-between gap-4">
          <span className="text-callout text-label">En la app</span>
          <Switch aria-label="Avisos en la app" />
        </div>
      </SettingsSection>
      <SettingsSection description="Ocupa las dos columnas." title="Avanzado" wide>
        <p className="text-callout text-label-secondary">Un contenido ancho: una tabla, una zona de arrastre.</p>
      </SettingsSection>
    </SettingsGrid>
  )
}
```

## Props

### SettingsGrid

Hereda las props de `<div>`.

| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
| `className` | `string` | — | Se fusiona con las clases del componente vía `cn()` (tailwind-merge): lo que pongas gana. |

### SettingsSection

Hereda las props de `<section>`.

| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
| `title` * | `React.ReactNode` | — | El título de la sección. Nombra la región. |
| `description` | `React.ReactNode` | — | Una línea debajo del título. |
| `footer` | `React.ReactNode` | — | El pie de la card. |
| `id` | `string` | — | El `id` de la card; el título cuelga de él para nombrar la región. Sin `id`, se genera uno. |
| `wide` | `boolean` | — | Ocupa las dos columnas cuando la grilla las tiene (desde 48 rem de ancho, `@3xl`). |
| `className` | `string` | — | Se fusiona con las clases del componente vía `cn()` (tailwind-merge): lo que pongas gana. |

`*` obligatoria.

## Teclado

| Tecla | Qué hace |
|---|---|
| Tab | La sección no es una parada: recorre los campos de adentro. |

## Accesibilidad

- Cada sección es una región (`role="region"`) nombrada por su título con `aria-labelledby`: el lector las lista y se salta de una a otra.
- El orden del DOM es el de lectura: de izquierda a derecha y fila por fila. Con `wide`, la sección ocupa las dos columnas sin cambiar el orden.
- Sin estado ni `"use client"`: sirve en un Server Component (los campos de adentro pueden ser clientes).

## Reglas de uso

- **Configuración = secciones en cards, 2 columnas desde 48 rem de ancho de la grilla (`@3xl`) y 1 por debajo**; nunca una columna angosta de campos pegada a un costado.
- Una sección por tema («Empresa», «Marca», «Moneda e impuestos»): título corto y una descripción de una línea. Los campos llenan el ancho de la card.
- `SettingsGrid` pone las secciones de una fila a la misma altura (subgrid). `wide` es para lo que necesita el ancho: una zona de arrastre, una tabla.
- `footer` es el pie de la card (un botón propio de la sección). El «Guardar» de toda la pantalla va aparte, en una barra a todo el ancho.

## Relacionados

[card](/docs/components/card.md) · [field](/docs/components/field.md) · [switch](/docs/components/switch.md) · [form](/docs/components/form.md)