## 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
;
```
### 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 (
{}}>
setHasPublishPeriod(!hasPublishPeriod)}
size="small"
/>
{hasPublishPeriod && (
)}
);
};
const renderCreateStep = () => (
<>
{renderBackgroundSidePanel()}
Composer content area
);
return (
{renderCreateStep()}
);
};
```
## Accessibility Examples
### Using hidden legends
- description: Provide extra information within the `legend` for screen reader users. To hide this information on screen, set the `legendPlacement` to `none`.
- example:
```jsx
;
```
### Status messages
- description: When using FieldSet with FormField, the status message is connected to Input element automatically. If it's a FieldSet message without status, it applies to all Inputs under that FieldSet and if message has a status, it only applies the message to the FormField of matching status. If more control is required over status message linking, set FieldSet `statusId` and Input `aria-describedby` to the same value. This disables the automatic linking.
- example:
```jsx
() => {
return (
{/* Manually linked status message */}
);
};
```