## Feature Examples ### Structure - description:

A field set consists of legend, suffix and children areas.

Children and suffix areas can include any actions or form components.

- example: ```jsx
Suffix } > Children
; ``` ### Legend placement - description:

Control the legend position with the legendPlacement. It supports 4 options:

  • For all common cases use top (default).
  • Use left or right to save vertical space in less spacious layouts. This only works well with short legends. When using, be mindful of localization.
  • Use none to visually hide the legend. It will still be available for screen readers.
    • - example: ```jsx
    ; ``` ### Legend alignment - description:

    When legend is placed on the side, its vertical position can be controlled with legendAlignment. It supports 2 options:

  • For all common cases use top (default).
  • Use middle for single line inputs.
    • - example: ```jsx
    ; ``` ### Required - description:

    Mark mandatory field sets with an asterisk by using required.

    - example: ```jsx
    ; ``` ### Status and message - description:

    To change the status and display a message below the field set, use status and statusMessage.

  • For an error message, set the status to error.
  • For a warning message, set the status to warning.
  • To show helper text, use the statusMessage with no status.

    • Note: to set the status and message for individual child components, use the same props within that component's FormField.

    - example: ```jsx
    ; ``` ### Additional info - description:

    Use a tooltip to provide users with more information about the field set and what they need to input.

    To add info icon content use infoContent.

    - example: ```jsx
    ; ``` ### Suffix - description:

    Add a custom element in the top-right corner of the field set to add extra actions or information. Any component can be used in this area.

    Or use charCount to show how many characters are left in a text input.

    Note: Choose either charCount or a custom element inside suffix; using both together is not possible.

    - example: ```jsx
    }> Go to External Site } >
    ; ``` ### Content direction - description:

    Choose how child components are arranged in the field set:

  • horizontal (default) arranges them in a row.
  • vertical arranges them in a column.
    • - example: ```jsx
    ; ``` ### Content alignment - description:

    Choose how child components are aligned using alignment.

    In horizontal:

  • start (default) aligns to the top.
  • center aligns to the middle.
  • end to aligns to the bottom.

    • In vertical:

  • start (default) aligns to the left.
  • center aligns to the center.
  • end to aligns to the right.
    • - example: ```jsx Horizontal direction Vertical direction
    {' '}
    ; ``` ### Content width - description:

    Use columns to control the width of each field set child component. Check developer examples for more guidelines.

    Note: columns only works with horizontal direction.

    - example: ```jsx
    ; ``` ### Gap - description:

    Control the space between field set child components with gap:

  • For all common cases use small (default).
  • Use medium in more spacious layouts.
  • Use large for extra space between components.
    • - example: ```jsx
    ; ``` ## Developer Examples ### Custom content width - description:

    Set the width of each child component using columns.

  • Use min-content to make the child component as narrow as possible.
  • Use auto to make the child component fill in all available space.
  • Use px to set the component's width.
  • Use fr to set the column proportions. For example, use 1fr 1fr for equal width child components and 1fr 3fr to make the first child fill 25% and second to fill 75% of available width.
  • Use a combination of all 4 values to create custom content layouts.

    • Note: Do not use percentage values as they will cause child components to exceed the field set width.

    - example: ```jsx
    %} />
    ; ``` ## Common Use Case Examples ### In setting panels - description:

    Use field sets to group related form components together and give them a title.

    When individual component labels are descriptive enough, set field set legendPlacement to none.

    - example: ```jsx () => { const [backgroundOpacity, setBackgroundOpacity] = React.useState(100) const [textOpacity, setTextOpacity] = React.useState(100) const [hasPublishPeriod, setHasPublishPeriod] = React.useState(true) const changeBackgroundOpacity = (value) => { setBackgroundOpacity(value) } const changeTextOpacity = (value) => { setTextOpacity(value) } const items = [ { id: 0, label: 'Crop & Rotate', icon: , }, { id: 1, label: 'Enhance', icon: , }, { id: 2, label: 'Settings', icon: , }, ] const renderBackgroundSidePanel = () => { return ( {}}>
    %} size="small" onChange={(e) => changeBackgroundOpacity(e.target.value)} />
    %} size="small" onChange={(e) => changeTextOpacity(e.target.value)} />
    setHasPublishPeriod(!hasPublishPeriod)} size="small" /> {hasPublishPeriod && (
    )}     ) } const renderCreateStep = () => ( <> {renderBackgroundSidePanel()} Composer content area ) return ( {renderCreateStep()} ) } ```