2019-08-27 12:43:30 +00:00
|
|
|
# FieldContainer
|
|
|
|
|
|
2019-11-20 13:32:10 +00:00
|
|
|
Responsive form field container
|
|
|
|
|
|
|
|
|
|
### Usage
|
2019-08-27 12:43:30 +00:00
|
|
|
|
|
|
|
|
```js
|
2022-07-22 19:01:25 +00:00
|
|
|
import FieldContainer from "@docspace/components/field-container";
|
2019-08-27 12:43:30 +00:00
|
|
|
```
|
|
|
|
|
|
2019-11-20 13:32:10 +00:00
|
|
|
```jsx
|
2019-08-27 12:43:30 +00:00
|
|
|
<FieldContainer labelText="Name:">
|
2020-10-16 13:16:01 +00:00
|
|
|
<TextInput value="" onChange={(e) => console.log(e.target.value)} />
|
2019-09-04 09:17:55 +00:00
|
|
|
</FieldContainer>
|
2019-08-27 12:43:30 +00:00
|
|
|
```
|
|
|
|
|
|
2019-11-20 13:32:10 +00:00
|
|
|
### Properties
|
2019-08-27 12:43:30 +00:00
|
|
|
|
2019-11-26 11:12:44 +00:00
|
|
|
| Props | Type | Required | Values | Default | Description |
|
|
|
|
|
| ------------------------- | :---------------: | :------: | :----: | :-------: | ------------------------------------------------ |
|
2019-11-28 07:49:38 +00:00
|
|
|
| `className` | `string` | - | - | - | Accepts class |
|
|
|
|
|
| `errorColor` | `string` | - | - | `#C96C27` | Error text color |
|
|
|
|
|
| `errorMessageWidth` | `string` | - | - | `320px` | Error text width |
|
|
|
|
|
| `errorMessage` | `string` | - | - | - | Error message text |
|
2019-11-26 11:12:44 +00:00
|
|
|
| `hasError` | `bool` | - | - | `false` | Indicates that the field is incorrect |
|
|
|
|
|
| `helpButtonHeaderContent` | `string` | - | - | - | Tooltip header content (tooltip opened in aside) |
|
2019-11-28 07:49:38 +00:00
|
|
|
| `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 |
|
2020-10-16 13:16:01 +00:00
|
|
|
| `labelVisible` | `bool` | - | - | `true` | Sets visibility of field label section |
|
2019-11-26 11:20:14 +00:00
|
|
|
| `maxLabelWidth` | `string` | - | - | `110px` | Max label width in horizontal alignment |
|
2019-11-28 07:49:38 +00:00
|
|
|
| `style` | `obj`, `array` | - | - | - | Accepts css style |
|
|
|
|
|
| `tooltipContent` | `object`,`string` | - | - | - | Tooltip content |
|
