Form
This group of components are used to make a form layout
There are three wrappers for form elements: Form
, FormGroup
and FormFields
. It is not necessary to wrap all your forms into Form container, but these components give you a possibility to quickly and easily create a form layout.
Form
Form
container is the main container for form elements. All form elements must be inside this container.
Form
container adds <form>
element to DOM tree.
Properties (extends HTMLFormElement
)
HTMLFormElement
)Property | Type | Description |
---|---|---|
| ReactNode | Child elements |
| string | Custom CSS class |
FormGroup
FormGroup
is used to position child FormField
element in a specific layout. The layout can be specified using enum FormGroupVariant
.
FormGroupVariant
Properties
Property | Type | Description |
---|---|---|
|
| Child elements |
| Layout of the group. Default value is default | |
|
| The width of the child elements. Numbers set flex-grow property for every child element.
Works only with |
|
| Custom CSS class |
FormField
FormField wraps form control into a special container. You can also set a label and hintText of the control.
Properties
Property | Type | Description |
---|---|---|
| ReactNode | Inner control |
| string | Label text |
| boolean | Adds red asterisk to the label |
| string | Adds question mark with tooltip to the label |
History
Altrone 2.0
: addedhintText
prop forFormField
Altrone 1.0
: initial release
Last updated