Connected
is a versatile layout component that allows you to combine and style Inputs
, Buttons
and DropdownMenus
as a cohesive group. It automatically applies styling to make the elements look connected based on the group
prop passed to the Connected
component.
Usage
Import
import { Connected } from '@passfort/castle'content_copyCopy
Example
The Connected component uses React Context to group elements together and apply consistent styling across them.
content_copyCopy
live example
With DropdownMenu
The Connected
component will ensure that all child elements (DropdownMenu
, Input
and Button
) share a similar connected appearance as if they belong to the same group.
content_copyCopy
live example
Custom Group
You can customize which elements should be connected by sharing the same group value.
content_copyCopy
live example