Described form groups
Use EuiDescribedFormGroup component to create sections of associated form controls and rows. It can also simply be used with one EuiFormRow as a way to display additional text next to the field (on mobile, it will revert to being stacked).
Read more about appropriate layout usage of EuiDescribedFormGroup in the
guidelines.Sizing described form rows
By default, EuiDescribedFormGroup has a max-width of 800px for best readability. To expand the group to 100%, add the
fullWidth prop to this, the EuiFormRow, and the individual fields.
You can also change the ratio of the width of the description column versus the field column. By default it is 'half', but you can also change to 'third' or 'quarter' which prioritizes the field column. You will most likely still need to apply fullWidth to all the components. The description column does have a minimum readable width applied to it so that it cannot shrink too far.
Both the description and field columns are simply EuiFlexItem wrappers. If you need more customization of these columns you can pass flex item props to descriptionFlexItemProps and fieldFlexItemProps respectively.
Props
EuiDescribedFormGroup
Prop | Description and type | Default value |
|---|---|---|
Prop title# | Description and type For better accessibility, it's recommended to use an HTML heading. ReactElement | Default value Required |
Prop className# | Description and type Type: string | Default value |
Prop aria-label# | Description and type Defines a string value that labels the current element. string | Default value |
Prop data-test-subj# | Description and type Type: string | Default value |
Prop css# | Description and type Type: Interpolation<Theme> | Default value |
Prop children# | Description and type One or more ReactNode | Default value |
Prop gutterSize# | Description and type Passed to "xs" | "s" | "m" | "l" | "xl" | "none" | Default value l |
Prop fullWidth# | Description and type Expand to fill 100% of the parent. boolean | Default value false |
Prop ratio# | Description and type Width ratio of description column compared to field column. "half" | "third" | "quarter" | Default value half |
Prop titleSize# | Description and type Adjust the visual "xs" | "s" | "m" | "l" | "xxxs" | "xxs" | Default value xs |
Prop description# | Description and type Added as a child of ReactNode | Default value |
Prop descriptionFlexItemProps# | Description and type For customizing the description container. Extended from { children?: ReactNode; } & CommonProps & Omit<any, "ref"> & { grow?: boolean | 0 | 5 | 2 | 8 | 3 | 7 | 1 | 4 | 6 | 9 | 10; component?: ElementType; } & { ...; } | Default value |
Prop fieldFlexItemProps# | Description and type For customizing the field container. Extended from { children?: ReactNode; } & CommonProps & Omit<any, "ref"> & { grow?: boolean | 0 | 5 | 2 | 8 | 3 | 7 | 1 | 4 | 6 | 9 | 10; component?: ElementType; } & { ...; } | Default value |