'/%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}
Data entryAlea Pro
FieldPresence
Marks a field, a group of fields or a table row as being edited by someone else: a thick border and a label with their name, and the same sentence in the accessible description.
import { FieldPresence, useFieldPresence } from '@alea-design/pro';
Examples
A field being edited
A thick border and the name of who is editing, around a text field and a select.
A table row
useFieldPresence gives the props for a Row and a label for one of its cells.
A table row
A row cannot be wrapped in a div. Call useFieldPresence(editors) and spread its props on the Row, then put its label in a cell. The row gets the same thick edge as a wrapped field.
Tokens
The design tokens this component reads, with their value in the current theme. Override any of them to restyle it.
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
Marks a field as being edited by someone else: a thick border and a label with their name (never color alone), and the same sentence in the accessible description of the group. For a table row use useFieldPresence and spread its props on the Row.
| Prop | Type | Default | Description |
|---|---|---|---|
childrenrequired | ReactNode | The field or the fields it surrounds: a TextInput, a Select, a group of inputs. | |
as | "div" | "li" | "section" | "div" | The wrapper element. Default div. |
editors | PresencePerson[] | none | Who is editing this field right now. Empty or missing marks nothing. |
Specs
Generated from the source: the variants in the types, the states and tokens in the CSS, and the motion patterns that apply. The grids render the real component in both themes; the numbers are measured from the page.
- Variants
asdivlisection- Dark and light
- Every color comes from theme tokens, so it follows data-theme (and presets like Graphite) on the page or any wrapper. Contrast is checked in both themes.
- Styling hooks
.alea-field-presence.alea-field-presence-tag- Data attributes
data-editing
Accessibility
- The mark is a thick border, an icon and the name ("Ana is editing"), so it never depends on color alone.
- The wrapper becomes a group and gets the same sentence as its accessible description; the visible label is hidden from screen readers so it is not read twice.
- For a table row the label sits in one of its cells, where a screen reader reads it with the row.
- With reduced motion the border appears without any transition.
- In Windows high contrast the border becomes a system-color outline.
Do and don't
Do
- Pass the people who are editing right now; an empty list marks nothing and adds no markup.
- Give the wrapper an aria-label with the name of the field when it surrounds more than one control.
- Keep the field editable: it is a signal, not a lock. Block it in your own code if you need a lock.
Don't
- Don't use it to show a validation error: use the field's own error message.
- Don't use a color of your own to tell people apart: the name is the signal.
In Figma
The properties of the Figma components, generated from the kit, so they always match it. The last column is the React prop each one stands for.
Field presence · 2 variants
| Figma property | Kind | Values | Default | React prop |
|---|---|---|---|---|
| Target | Variant | Field, Row | Field | children |
| Editor | Text | - | Ana is editing | editors |
| Editing | Boolean | - | true | editors |