@forter/form-section
Version:
form-section from Forter Components
54 lines (43 loc) • 3.25 kB
Markdown
# fc-form-section
An element by Forter
<!-- Author: oweingart <oweingart@forter.com> -->
## Usage
```html
<script>
import '@forter/form-section';
</script>
<fc-form-section>
<fc-form-field></fc-form-field>
</fc-form-section>
```
## Properties
| Property | Attribute | Type | Default | Description |
|-------------------------|---------------|------------------------|---------|--------------------------------------------|
| `align` | `align` | `string` | | Alignment of the form section (row/column) |
| `collapsable` | `collapsable` | `boolean` | false | If the section is collapsable |
| `collapse` | `collapse` | `boolean` | false | If the section is currently collapsed |
| `dirty` | `dirty` | `boolean` | false | If the section is dirty |
| `disabled` | `disabled` | `boolean` | false | Internal Observables |
| `invalidFields` | | `never[]` | | |
| `isCollapsed` | | `"right" \| "down"` | | |
| `isSlottedLabel` | | `"" \| TemplateResult` | | |
| `label` | `label` | `"" \| TemplateResult` | | |
| `missingRequiredFields` | | `never[]` | | |
| `model` | | `{}` | {} | |
| `touched` | `touched` | `boolean` | false | If the section was touched |
| `valid` | `valid` | `boolean` | false | If the section is valid |
## Events
| Event |
|---------------|
| `field-added` |
## CSS Custom Properties
| Property | Description |
|-----------------------------------------|--------------------------------------------------|
| `--fc-form-section-arrow-color` | section label arrow color (when section is collapsable) . default: "var(--fc-gray-700)" |
| `--fc-form-section-color` | section font color. default: "balck" |
| `--fc-form-section-label-font-size` | section label font size. default: "12px" |
| `--fc-form-section-label-font-weight` | section label font weight. default: "normal" |
| `--fc-form-section-label-invalid-color` | section label color when the section is invalid. default: "var(--fc-red-900)" |
| `--fc-form-section-label-margin-bottom` | section label margin bottom. default: "0px" |
| `--fc-form-section-margin-right-item` | section margin right of each field (row alignment only). default: "20px" |
| `--fc-form-section-padding-left` | section padding left. default: "5px" |