Skip to main content

Function: Group()

Group(__namedParameters): Element

Defined in: components/Group/Group.tsx:74

A semantic grouping frame built on React Aria's Group (role="group").

Entity = Structure → reads vars.colors.informational.{primary|muted} for the boundary and label color, vars.radii.surface for the corner, and vars.spacing.inset.surface for its padding. Use it to associate a set of related controls (a segmented address block, a pair of range inputs, a toolbar of filters) under one accessible region. Non-interactive: it has no hover/focus chrome of its own; keyboard behavior belongs to the controls inside it.

Parameters

ParameterType
__namedParametersGroupProps

Returns

Element

Example

<Group label="Shipping address">
<TextField><TextFieldLabel>Street</TextFieldLabel><TextFieldControl /></TextField>
<TextField><TextFieldLabel>City</TextFieldLabel><TextFieldControl /></TextField>
</Group>