Viktor Fomin
e879d94bff
# Conflicts: # packages/asc-web-common/api/settings/index.js # packages/asc-web-components/checkbox/index.js # packages/asc-web-components/file-input/index.js # packages/asc-web-components/index.js # packages/asc-web-components/label/index.js # web/ASC.Web.Client/public/locales/en/Settings.json # web/ASC.Web.Client/public/locales/ru/Settings.json # web/ASC.Web.Client/src/components/pages/Settings/Layout/Article/Body/index.js # web/ASC.Web.Client/src/components/pages/Settings/index.js |
||
---|---|---|
.. | ||
field-container.stories.js | ||
field-container.test.js | ||
index.js | ||
README.md | ||
styled-field-container.js |
FieldContainer
Responsive form field container
Usage
import FieldContainer from "@appserver/components/field-container";
<FieldContainer labelText="Name:">
<TextInput value="" onChange={(e) => console.log(e.target.value)} />
</FieldContainer>
Properties
Props | Type | Required | Values | Default | Description |
---|---|---|---|---|---|
className |
string |
- | - | - | Accepts class |
errorColor |
string |
- | - | #C96C27 |
Error text color |
errorMessageWidth |
string |
- | - | 320px |
Error text width |
errorMessage |
string |
- | - | - | Error message text |
hasError |
bool |
- | - | false |
Indicates that the field is incorrect |
helpButtonHeaderContent |
string |
- | - | - | Tooltip header content (tooltip opened in aside) |
id |
string |
- | - | - | Accepts id |
isRequired |
bool |
- | - | false |
Indicates that the field is required to fill |
isVertical |
bool |
- | - | false |
Vertical or horizontal alignment |
labelText |
string |
- | - | - | Field label text |
labelVisible |
bool |
- | - | true |
Sets visibility of field label section |
maxLabelWidth |
string |
- | - | 110px |
Max label width in horizontal alignment |
style |
obj , array |
- | - | - | Accepts css style |
tooltipContent |
object ,string |
- | - | - | Tooltip content |