Castle logo

CASTLE UI

Search

K

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'

Copy

Example

The Connected component uses React Context to group elements together and apply consistent styling across them.

Copy

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.

Copy

live example

Custom Group

You can customize which elements should be connected by sharing the same group value.

Copy

live example

Contents