CollapsibleInlay

How to get CollapsibleInlay

import { CollapsibleInlay } from 'fds/components';

Type: Component

A CollapsibleInlay creates a white background with a border around it. This can be used to group certain components visually. For example when designing a form, an Inlay can be used inside a FormRow to group certain fields of the form together visually.

Additionally a CollapsibleInlay allows the user to collapse content of the inlay by clicking its header, showing an animation while collapsing or expanding. If collapsing the Inlay isn't needed, you can use a regular Inlay instead of a CollapsibleInlay.

Props

# Name Type Description
1. children ReactNode
2. [flex] Number | String

The value to use for CSS' flex property.

  Default value
"none"
3. [headerContent] React:node

The content to render in the header.


  Default value
null
4. isCollapsed Boolean

Whether or not the inlay is currently collapsed.

5. onChange Function

A callback that is called whenever a component's value changes.

This callback is called just before the "validate" prop is called.

Use this callback to update local state which in turn should update the value prop of the component whose callback just fired.


  Arguments
# Name Type Description
1. value Value | Array<ItemWithLabelAndValueValue>

A single value or an array of values, depending on the component that is changing.


  Value

Type: *

The current value of the component. This value will be visualized in the component, often using a human readable label, sometimes using another visual indication (e.g. Checkbox).

Depending on the component, the data type in JavaScript might be restricted further: eg: a TimeSelect might expect a Date, a TextInput a string etc. These restrictions are implemented with React PropTypes console warnings.

  ItemWithLabelAndValueValue

Type: *

The value of an ItemWithLabelAndValue.

This value is used to compare items, eg. when determining the selected item(s).

Depending on the component, the data type in JavaScript might be restricted further: eg: a TimeSelect might expect a Date, a TextInput a string etc. These restrictions are implemented with React PropTypes console warnings.

6. [spaceVerticalSize] Number | String

The amount of vertical space (or margin) between the children of the component.

This should be one of the following values:

  • 0 (zero, no margin at all)

  • 's' (small)

  • 'm' (medium)

  • 'l' (large)

  Default value
"m"