'/%3e%3cg%20transform='translate(170%20205)%20scale(0.3606)'%20fill='%23111011'%3e%3cpath%20d='M497%20640H359L248%20320%20122%20640H0L256%200z'/%3e%3cpath%20d='M292.43%20640H200.8L248%20522z'/%3e%3cpath%20d='M335%200h138l111%20320L710%200h122L576%20640z'/%3e%3c/g%3e%3c/svg%3e){kind=small}
Entrada de datosAlea Pro
FieldPresence
Marca un campo, un grupo de campos o una fila de tabla como en edición por otra persona: un borde grueso y una etiqueta con su nombre, y la misma frase en la descripción accesible.
import { FieldPresence, useFieldPresence } from '@alea-design/pro';
Ejemplos
Un campo en edición
Un borde grueso y el nombre de quien edita, alrededor de un campo de texto y un selector.
Una fila de tabla
useFieldPresence da las props para una Row y una etiqueta para una de sus celdas.
Una fila de tabla
Una fila no se puede envolver en un div. Llama a useFieldPresence(editors), reparte sus props en la Row y pon su etiqueta en una celda. La fila recibe el mismo borde grueso que un campo envuelto.
Tokens
Los tokens de diseño que usa este componente, con su valor en el tema actual. Cambia cualquiera para darle otro estilo.
Color
--alea-accent…--alea-accent-subtle…
Space
--alea-space-0-5…--alea-space-2…
Radius
--alea-radius-md…
Motion
--alea-motion-duration-base…--alea-motion-ease-out…
Component
--alea-fp…
Props
FieldPresence props
Marca un campo como en edición por otra persona: un borde grueso y una etiqueta con su nombre (nunca solo color), y la misma frase en la descripción accesible del grupo. Para una fila de tabla usa useFieldPresence y reparte sus props en la Row.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
childrenobligatoria | ReactNode | El campo o los campos que rodea: un TextInput, un Select, un grupo de inputs. | |
as | "div" | "li" | "section" | "div" | El elemento contenedor. Por defecto div. |
editors | PresencePerson[] | ninguno | Quién está editando este campo ahora. Vacío o ausente no marca nada. |
Especificaciones
Generado desde el código: las variantes de los tipos, los estados y tokens del CSS, y los patrones de motion que aplican. Las grillas muestran el componente real en ambos temas; los números se miden en la página.
- Variantes
asdivlisection- Oscuro y claro
- Cada color viene de tokens del tema, así que sigue a data-theme (y a presets como Graphite) en la página o en cualquier contenedor. El contraste se revisa en ambos temas.
- Clases para estilos
.alea-field-presence.alea-field-presence-tag- Atributos data
data-editing
Accesibilidad
- La marca es un borde grueso, un icono y el nombre ("Ana está editando"), así que nunca depende solo del color.
- El contenedor pasa a ser un grupo y recibe la misma frase como descripción accesible; la etiqueta visible se oculta a los lectores de pantalla para que no se lea dos veces.
- En una fila de tabla la etiqueta va en una de sus celdas, donde el lector de pantalla la lee junto con la fila.
- Con movimiento reducido el borde aparece sin ninguna transición.
- En el alto contraste de Windows el borde pasa a ser un contorno con colores del sistema.
Qué hacer y qué evitar
Hacer
- Pasa a las personas que están editando ahora; una lista vacía no marca nada y no añade marcado.
- Dale al contenedor un aria-label con el nombre del campo cuando rodea más de un control.
- Deja el campo editable: es una señal, no un bloqueo. Bloquéalo en tu propio código si necesitas un bloqueo.
Evitar
- No lo uses para mostrar un error de validación: usa el mensaje de error del propio campo.
- No uses un color propio para distinguir a las personas: la señal es el nombre.
En Figma
Las propiedades de los componentes de Figma, generadas desde el kit, así que siempre coinciden con él. La última columna es la prop de React que representa cada una.
Field presence · 2 variantes
| Propiedad de Figma | Tipo | Valores | Por defecto | Prop de React |
|---|---|---|---|---|
| Target | Variant | Field, Row | Field | children |
| Editor | Text | - | Ana is editing | editors |
| Editing | Boolean | - | true | editors |