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_copy
Copy

Example

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

<Connected>
  <Button label="Before button" />
  <Input placeholder="Input text here" />
  <Button label="After button" />
</Connected>
<Connected>
  <Button label="Before button" />
  <Input placeholder="Input text here" />
  <Button label="After button" />
</Connected>
content_copy
Copy
live example

With Select

The Connected component will ensure that all child elements (Select, Input and Button) share a similar connected appearance as if they belong to the same group.

function Example() {
  const [current, setCurrent] = useState('')

  const handleSelect = (value) => {
    setCurrent(value)
  }

  return (
    <Connected>
      <Select value={current} onChange={handleSelect}>
        <Select.Button placeholder="Select vehicle" />
        <Select.Options>
          <Select.Option value="bike">Bike</Select.Option>
          <Select.Option value="car">Car</Select.Option>
          <Select.Option value="plane">Plane</Select.Option>
        </Select.Options>
      </Select>
      <Input placeholder="Model name" />
      <Button type="submit" label="Submit" />
    </Connected>
  )
}
function Example() {
  const [current, setCurrent] = useState('')

  const handleSelect = (value) => {
    setCurrent(value)
  }

  return (
    <Connected>
      <Select value={current} onChange={handleSelect}>
        <Select.Button placeholder="Select vehicle" />
        <Select.Options>
          <Select.Option value="bike">Bike</Select.Option>
          <Select.Option value="car">Car</Select.Option>
          <Select.Option value="plane">Plane</Select.Option>
        </Select.Options>
      </Select>
      <Input placeholder="Model name" />
      <Button type="submit" label="Submit" />
    </Connected>
  )
}
content_copy
Copy
live example

Custom Group

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

<Connected group="submit">
  <Input placeholder="Placeholder" />
  <Spacer />
  <Input group="submit" placeholder="Input text here" />
  <Button group="submit" label="Submit" />
</Connected>
<Connected group="submit">
  <Input placeholder="Placeholder" />
  <Spacer />
  <Input group="submit" placeholder="Input text here" />
  <Button group="submit" label="Submit" />
</Connected>
content_copy
Copy
live example