Skip to main content

Form Element

A form element structure to group different labels, controls, helpers and subelements needed to build forms.

Props​

NameTypeRequiredDefaultDescription
labelReact.ReactNodeYes-The label of the form element

Examples​

Simple​

Result
Loading...
Live Editor
<FormElement
    label="Label"
    helpOrErrorText="Helptext or Error"
>
    <Input type="text"/>
</FormElement>

With error​

Result
Loading...
Live Editor
<FormElement
    label="Label"
    helpOrErrorText="Helptext or Error"
    hasError
>
    <Input type="text"/>
</FormElement>

With success​

Result
Loading...
Live Editor
<FormElement
    label="Label"
    helpOrErrorText="Helptext or Error"
    hasSuccess
>
    <Input type="text"/>
</FormElement>

As fieldset with custom element and label component​

Result
Loading...
Live Editor
<FormElement
    component="fieldset"
    labelComponent="legend"
    label="A fieldset"
>
    <Input type="text"/>
</FormElement>