Skip to content

Properties

PropertyTypeDescription
labelReact.ReactNode(optional) use either the label property or provide a custom one.
label_directionvertical
horizontal
(optional) use label_direction="vertical" to change the label/legend layout direction. Defaults to horizontal.
label_sr_onlyboolean(optional) use true to make the label only readable by screen readers.
directionvertical
horizontal
(optional) to define the layout direction on how the next component should be placed on. Can be either vertical or horizontal. Defaults to horizontal.
verticalboolean(optional) will force both direction and label_direction to be vertical if set to true
centeredboolean(optional) will center all children vertically as long as the screen does not hit a mobile width.
wrapboolean(optional) forces the content of a FormRow to wrap. Make sure you always define spacing as right="..." and not left, this way components will align left once they wrap. Defaults to false.
responsiveboolean(optional) to force responsiveness on form components (like Input and their labels (FormLabel), set the property to true. Defaults to false.
section_styledivider
white
transparent
(optional) to enable the visual helper .dnb-section class. Use a supported modifier from the Section component. Defaults to null.
section_spacingx-small
small
medium
large
x-large
xx-large
(optional) to modify the spacing. Use a supported modifier from the Section component. Defaults to null.
no_fieldsetboolean(optional) if set to true, then the internal legend element will be a label instead, and no <fieldset> is used. Keep in mind, that <legend> and <fieldset> is only used if a label is provided. Defaults to false.
label_classstring(optional) if you need to style the "legend", then you can either send in a custom Component, like label={ <H2> }, or define your styling class with the label_class property.
localestring(optional) Send along a different locale to all nested components.
disabledboolean(optional) if set to true, every component inside will be disabled. Defaults to false.
skeletonboolean(optional) If set to true, an overlaying skeleton with animation will be shown.
Spacestring
object
(optional) Spacing properties like top or bottom are supported.