Aleksandr Lushkin
31323d26ba
# Conflicts: # packages/client/src/components/ItemIcon.js # packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/RoomTypeDropdown/DropdownMobile.js # packages/client/src/components/panels/EditLinkPanel/StyledEditLinkPanel.js # packages/client/src/components/panels/InvitePanel/StyledInvitePanel.js # packages/client/src/components/panels/UploadPanel/FileRow.js # packages/client/src/pages/FormGallery/Filter/SortFilter/index.styled.js # packages/client/src/pages/PortalSettings/categories/data-import/components/AddEmailsStep/AccountsTable/RowView/UsersRowContent.tsx # packages/client/src/pages/PortalSettings/categories/storage-management/StyledComponent.js # packages/client/src/pages/Profile/Section/Body/sub-components/main-profile/styled-main-profile.js # packages/shared/components/media-viewer/MediaViewer.styled.ts |
||
---|---|---|
.. | ||
FieldContainer.stories.tsx | ||
FieldContainer.styled.ts | ||
FieldContainer.test.tsx | ||
FieldContainer.tsx | ||
FieldContainer.types.tsx | ||
index.tsx | ||
README.md |
FieldContainer
Responsive form field container
Usage
import { FieldContainer } from "@docspace/shared/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 |
removeMargin |
bool |
- | - | false |
Remove default margin property |
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 |