35 lines
2.4 KiB
Markdown
35 lines
2.4 KiB
Markdown
# FieldContainer
|
|
|
|
Responsive form field container
|
|
|
|
### Usage
|
|
|
|
```js
|
|
import FieldContainer from "@docspace/components/field-container";
|
|
```
|
|
|
|
```jsx
|
|
<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 |
|